React Native에서 연속으로 3 개의 이미지 배열

-1

나는 React Native 프로젝트에서 작업하기 시작했고 막혔다. API의 이미지 목록을 표시해야합니다. 이 API는 내가 같이 사용할 수있는 이미지의 URL을 제공합니다React Native에서 연속으로 3 개의 이미지 배열

<Image 
     style={{width: 50, height: 50}} 
     source={{uri: 'https://avatars0.githubusercontent.com/u/13102253?s=460&v=4'}} 
/>

이미지 수가 동적입니다하지만 행 당 3 이미지를 표시합니다. 이것을 어떻게 할 수 있습니까?

출처

2017-12-04 Alfy

그래서 API는 HTML을 제공합니까? API 응답에서 과도한 HTML 코드 (그림이 너무 많음)를 제거하는 것으로 문제를 단순화 할 수 있습니까? 이것은 정보가 너무 적습니다 .. 문제를 해결하려고 시도한 코드는 어디에 있습니까? – DanteTheSmith

당신은 당신이 필요로 정확히 무엇을하는 당신이 행

<ListView 
    contentContainerStyle={styles.list} 
    dataSource={this.props.yourData} //datasource either props/state only 
    pageSize={3} 
    renderRow={(data, rowID, sectionID) => (
<Image 
    style={{width: 50, height: 50}} 
    source={{uri: data.path}}/>)} //path here is url that you receive 

const styles = StyleSheet.create({ 
list: { 
flexDirection: "row", 
flexWrap: "wrap" 
}})

출처

2017-12-04 16:46:02

모든 이미지에 걸쳐 반복됩니다 ... 나는 여전히 네이티브 반응을하기 위해 새로운입니다. – Alfy

@Alfy yup !! 여러분이 제공 한 데이터가 'yourData'에 15 개의 아이템을 가지고 있다고 가정하면 5 행 3 열을 얻을 수 있습니다. –

감사합니다. @Senthil – Alfy

반작용 네이티브 FlatList로 배치 처리됩니다이 및 페이지 크기와 같은 행으로 포장하여 스타일을 지정할 수 있습니다 ListView를 사용할 수 있습니다. 그것은 당신의 경우에 data 소품 3.

<FlatList 
    numColumns={3} 
    data={yourImagesArray} 
    renderItem={<YourImageComponent >} 
/>

(내가 여기 yourImagesArray라고도 함) 데이터 배열의 각 반복 (내가 여기 을라고도 함) renderItem에 전달 될해야 numColumns 소품을 받아들입니다. 따라서 의 렌더링 기능은 다음과 같아야합니다.

render() { 
    const { data } = this.props; 

    return (
    <Image source={{ uri: data.uri }} style={{ width: 50, height: 50 }} /> 
); 
}

출처

2017-12-04 21:12:29

React Native에서 연속으로 3 개의 이미지 배열

답변

관련 문제