我正在尝试使用 FlatList 以网格格式向某人显示一堆用户头像,但它最终看起来很奇怪,我似乎无法弄清楚如何修复它。
这是我的 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;
有人有想法么?