Question

在iOS上渲染项目网格时，我可以在Android上摆脱一点小小的空白。

我使用Dimensions获取宽度，然后应用＆＃39; / 3＆＃39;到每个＆lt; cell / item＆＃39;。

我相信适当的样式应用于Listview的contentContainerStyle，所以不确定我缺少什么。

renderUser(user) {
        var userElement = <View style={{
        width:WidthHeight.size.width / 3,
        position:'relative',
        height:100,
        backgroundColor:'transparent',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center'
        }} >

<Image source={{ uri: user.picture.large}} resizeMode={"cover"} style={{ position:'absolute', flex:1, top:0, left:0, bottom:0, right:0, height:100,  }} />

<TouchableOpacity onPress={Actions.conversation} style={{ flexDirection:'column', justifyContent:'center', alignItems:'center' }} activeOpacity={75 / 100}>  
  <Bold style={{ alignSelf:'stretch', fontSize:45, fontWeight:'900', color:'#fff', }} > {user.match} </Bold> 
  <Bold  style={{ fontSize:13,  color:'#fff', }}> {user.name.first.toUpperCase()} </Bold>  
</TouchableOpacity>

    </View>

  return userElement;

}

render() {
return (
  <View style={Containers.containerNavbar}>

    <ListView
      contentContainerStyle={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start'
        }}
      initialListSize={30}
      pageSize={60}
      dataSource={this.state.dataSource}
      renderRow={this.renderUser.bind(this)}
    />

  </View>
);
}

任何见解？ TIA

反应原生网格问题（iOS）

0 个答案: