React Native 平面列表列

Question

基本上，我的平面列表分为 2 列。但如果项目的数量为奇数，则最后一行将被拉伸。

这是我的 Flatlist 编码

export default class Cluster1 extends Component{
render(){
    const getClusterByName = (name) => 
Cluster.find(cluster => cluster.hasOwnProperty(name))[name]
    return(
        <ScrollView>
        <FlatList
        numColumns= {2}
        data={getClusterByName('cluster1')}
        renderItem={({item,index})=>{
            return(
                <FlatListItem  item={item} index={index}>

                </FlatListItem>);
        }}
        >
        </FlatList>
        </ScrollView>
    );
}

那么这是我的 FlatlistItem

class FlatListItem extends Component{
render(){
    const {itemWidth} = this.props
    return(
        <View style={styles.list}>
        <View>


        <Text style={styles.itemText}>{this.props.item.name}</Text>

        </View>
        </View>
    );
}

样式代码

   const styles = StyleSheet.create({  
    list:{
    flex:1,
    borderRadius: 4,
    borderWidth: 0.5,
    width: 50,
    padding:20,
    backgroundColor: 'ghostwhite',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 2,


    }

这将是输出，您可以看到 'f' 是拉伸的。我希望它的宽度相同 enter image description here

Answer 1

从您的 styles.list 中删除 flex: 1，因为那样会占据整个宽度。

如果你想让它们占据一半的宽度，那么你可以把它改成flex: 0.5或者把width风格改成Dimensions.get('window').width / 2。

Answer 2

将宽度设置为 renderItem 作为 Dimensions.get('window').width / 2;

使用这个：

    borderRadius: 4,
    borderWidth: 0.5,
    width: (Dimensions.get('window').width - 4 * 10) / 2,
    padding:20,
    backgroundColor: 'ghostwhite',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 2,

React Native 平面列表列

React Native Flat list Column

react-native

react-native-flatlist