React Native - FaceBook과 같은 이미지 그리드를 만드는 법

Question

React Native를 사용하여 앱을 만들려고하는데 페이스 북 활동 사진처럼 배열하고 표시 할 이미지 목록이 필요합니다. 한마디로

, 나는 사람이 비슷한을 제공하는 RN 구성 요소를 알고 있나요

https://taras-d.github.io/images-grid/

의 반응 네이티브 버전을 만들려면?

Answer 1

각 이미지의 너비 높이를 설정하여 이미지 그리드를 직접 만들고 렌더링 할 수 있습니다.

예를 들어, 1 행에 3 개의 이미지가 필요합니다. 크기를 사용하여 창 너비를 가져 와서 3으로 나눌 수 있습니다.

const windowWidth = Dimensions.get('window').width; 
var IMAGES_PER_ROW = 3; 

calculatedSize(){ 
    var size = windowWidth/IMAGES_PER_ROW 
    return {width: size, height: size} 
} 

그런 다음 이미지를 연속으로 렌더링합니다. 당신이 margin: 1 같은 styles.item에서 원하는처럼

renderRow(images) { 
    return images.map((uri,i) =>{ 
     return(
     <Image key={i} style={[styles.item, this.calculatedSize()]} source={{uri: uri}} /> 
    ); 
    }) 
    } 
    renderImagesInGroupsOf(count) { 
    return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow,i) => { 
     return (
     <View style={styles.row} key={i}> 
      {this.renderRow(imagesForRow)} 
     </View> 
    ) 
    }) 
    } 

당신은 이미지 그리드 여백을 설정할 수 있습니다.

전체 예를 here