React native 平面列表numColumns不'；你看起来工作不正常吗？

我试图用一个平面列表以网格格式向某人显示一组用户头像，但结果看起来很奇怪，我似乎不知道如何修复它

下面是我的平面列表代码：

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

this.renderItem（项目）}
keyExtractor={this.\u 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;

class UserButton扩展了React.Component{
render（）{
const{item，onPress}=this.props；
返回(
)
}
常量样式={
按钮：{
身高：100，
宽度：100，
边框颜色：“#aaa”，
背景颜色：“#aaa”，
边界宽度：2，
边界半径：50，
为内容辩护：“中心”，
对齐项目：“居中”，
marginHorizontal:5，
},
图像样式：{
身高：96，
宽度：96，
对齐自我：“中心”，
边界半径：48，
marginTop:（Platform.OS=='android'）？0:0.4
}
}
导出默认用户按钮；

---

有人有什么想法吗？

我也遇到过类似的情况，但现在我有了使用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}
/>

}
keyExtractor={category=>category.id}
/>

您可以从尺寸中获取宽度，并为平面列表中的项目设置宽度

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