FlatList numColumns看起来不能正常工作？

我正在尝试使用FlatList向网格格式的某个人显示一堆用户头像，但最终看起来很奇怪，我似乎无法弄清楚如何解决此问题。FlatList numColumns看起来不能正常工作？

这里是我的FlatList代码如下所示：

<FlatList 
style={{flex: 1}} 
data={this.props.usersList} 
horizontal={false} 
numColumns={3} 
columnWrapperStyle={{ marginTop: 10 }} 
renderItem={({ item }) => this.renderItem(item)} 
keyExtractor={this._keyExtractor}/>

和这里的成分是什么样子的renderItem：

class UserButton extends React.Component { 
render() { 
    const { item, onPress } = this.props; 
    return (
     <TouchableOpacity style={styles.button} onPress={onPress}> 
      <Image 
       source={(item.avatar) ? { uri: item.avatar } : require('../assets/images/userplaceholder.png')} 
       resizeMode='cover' 
       style={styles.imageStyle} 
      /> 
     </TouchableOpacity> 
    ) 
} 

const styles = { 
    button: { 
     height: 100, 
     width: 100, 
     borderColor: '#aaa', 
     backgroundColor: '#aaa', 
     borderWidth: 2, 
     borderRadius: 50, 
     justifyContent: 'center', 
     alignItems: 'center', 
     marginHorizontal: 5, 
    }, 
    imageStyle: { 
     height: 96, 
     width: 96, 
     alignSelf: 'center', 
     borderRadius: 48, 
     marginTop: (Platform.OS == 'android') ? 0 : 0.4 
    } 
} 

export default UserButton;

人有什么想法？

来源

2017-04-19 Steven Conner

我在类似的情况，但现在我有适当的网格使用flatList，你可以看看我的代码下面。

<FlatList 
    contentContainerStyle={{margin:4}} 
    horizontal={false} 
    numColumns={4} 
    data={this.state.categoryDataSource} 
    renderItem={(categoryItem) => 
     <CategoryListItem category={categoryItem.item} mode="small"/> 
     } 
    keyExtractor={category => category.id} 
/>

来源

2017-08-09 13:01:06

您可以从尺寸宽度取并设置宽度为您flatlist的项目。

const {width} = Dimensions.get('window'); 
const itemWidth = (width)/4;

来源

2017-12-04 13:53:55

FlatList numColumns看起来不能正常工作？

回答

相关问题