從ReactNative的Listview中創建GridView

Question

考慮React Native中的一個簡單應用程序，該應用程序從遠程JSON源獲取列表並將它們顯示在屏幕上。

到目前爲止，我已經設法使用行中的ListView組件顯示結果（即每行2個結果，請參見屏幕截圖）。

在一個

row.both柵格顯示一個人的數據，我想 細節以連續的方式不重複。

 </Content> 
      <View style={{backgroundColor: 'white'}}> 
      <Text style={{color: 'black',fontSize: 17,marginTop: 25,marginLeft: 15}}>Employees</Text> 
      </View> 
      <List dataArray={currentContext.props.employeeList} 
      renderRow={(data) => 
       <ListItem> 
       {this.renderRow(data)} 
       </ListItem> 
      } /> 
      </Content> 

功能renderRow（數據）由

renderRow(data){ 
    return(
    typeOne() 
) 
    function typeOne(){ 
    return(
     <View style={styles.gridContainer}> 
     <Content contentContainerStyle={{ 
      padding:6, 
      paddingBottom:0 
      }}> 
     <View style={{flex:1,}}> 
      <Row> 
       {renderCell(data.photo_url, 0,data.name)} 
       {renderCell(data.photo_url, 1,data.name)} 
      </Row> 
     </View> 
      </Content> 
     </View> 
    ) 
    function renderCell(bg,pos,title){ 
     if (pos%2==0) { 
     return(
      <Col style={[{marginRight:3},styles.colStyle]}> 
      {cellContent(bg,title)} 
      </Col> 
     ) 
     }else{ 
     return(
      <Col style={[{marginLeft:3},styles.colStyle]}> 
      {cellContent(bg,title)} 
      </Col> 
     ) 
     } 
     function cellContent(bg,title){ 
     if(bg==null){ 
      return null 
     } 
     return(
      <Button style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'> 
      <View style={styles.cellContent}> 
       <Image style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/> 
       <View style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}> 
       <Text style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text> 
       </View> 
      </View> 
      </Button> 
     ) 
     } 
    } 
    } 
} 

給出怎樣才能獲得列表視圖每行返回2分數據的？

我會給你類似的問題，以供參考在下面的鏈接

ListView grid in React Native

請幫我解決這個問題。

風格部分

const styles = StyleSheet.create({ 
    container: { 
     flex:1, 
     backgroundColor:'white', 
    }, 
    button:{ 
     color:'white' 
    }, 
    overLayView: { 
     position:'absolute', 
     alignSelf:'center', 

    }, 
    gridContainer: {backgroundColor:'#EDF0F2',flex:1,}, 
    colStyle:{height:210,flex:1,marginBottom:6,marginRight:10,marginLeft:10}, 
    cellContent:{position:'absolute',left:0,right:0,top:0,bottom:0}, 
    cellTitleBg:{bottom:65,backgroundColor:'#778899',height:35}, 
    cellTitle:{bottom:65,color:'white',fontWeight:'bold',fontSize:17,right:0,textAlign:'right',right:0} 
}) 

Answer 1

也許使用包裝庫，我建議這個：https://www.npmjs.com/package/react-native-easy-listview-gridview

Answer 2

嘗試了這一點...

通指數從renderRow功能下降到這個功能在哪裏定義了這個觀點。

<Button key={index} style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'> 
      <View key={index} style={styles.cellContent}> 
       <Image key={index} style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/> 
       <View key={index} style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}> 
       <Text key={index} style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text> 
       </View> 
      </View> 
      </Button>