从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>