react-native – FlatList numColumns似乎无法正常工作?
发布时间:2020-12-15 09:32:23 所属栏目:百科 来源:网络整理
导读:我正在尝试使用FlatList以网格格式向某人显示一堆用户头像,但最终看起来很奇怪,我似乎无法弄清楚如何修复它. Here’s what it looks like 这是我的FlatList代码的样子: FlatListstyle={{flex: 1}}data={this.props.usersList}horizontal={false}numColumns=
我正在尝试使用FlatList以网格格式向某人显示一堆用户头像,但最终看起来很奇怪,我似乎无法弄清楚如何修复它.
Here’s what it looks like 这是我的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; 有人有主意吗? 解决方法
您可以从“尺寸”中获取宽度,并为平面列表的项目设置宽度.
const {width} = Dimensions.get('window'); const itemWidth = (width) / 4; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |