FlatList numColumns 似乎无法正常工作? [英] FlatList numColumns doesn't appear to be working correctly?

问题描述

我正在尝试使用 FlatList 以网格格式向某人显示一堆用户头像，但最终看起来很奇怪，我似乎无法弄清楚如何解决它.

I'm trying to use a FlatList to show a bunch of user avatars to someone in a grid format, but it ends up looking very strange and I can't seem to figure out how to fix it.

这是它的样子

这是我的 FlatList 代码的样子:

Here's what my FlatList code looks like:

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

这里是 renderItem 组件的样子:

and here's what the component looks like for 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;

有人有什么想法吗?

推荐答案

您可以从 Dimensions 中获取宽度并为您的平面列表中的项目设置该宽度.

You can take width from Dimensions and set that width for items of your flatlist.

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

这篇关于FlatList numColumns 似乎无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！