2列Flatlist组件无法正确分配列

问题描述

我有一个包含2行的flatlist组件，但各列分配不正确。我在设计样式时遇到麻烦。 我的单位列表：

<FlatList
        contentContainerStyle={styles.list}
        numColumns={2}
        data={this.props.route.params.data}
        keyExtractor={(item,index) => item.id}
        renderItem={({item}) => (
          <TouchableOpacity
            style={styles.view}
            onPress={() =>
              item.subcategories
                ? this.props.navigation.navigate('Browse',{
                    screen: 'Subcategories',params: {data: item.subcategories},})
                : this.props.navigation.navigate('Browse',{
                    screen: 'Products',params: {id: item.id},})
            }
            underlayColor="grey">
            <View style={styles.view}>
              <Text style={styles.title}>{item.title}</Text>
            </View>
          </TouchableOpacity>
        )}
      />

样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,marginTop: StatusBar.currentHeight || 0,},list: {
    flexDirection: 'column',view: {
    backgroundColor: 'grey',alignItems: 'center',justifyContent: 'center',alignContent: 'stretch',margin: 1,item: {
    backgroundColor: '#f9c2ff',padding: 20,marginVertical: 8,marginHorizontal: 2,title: {
    textAlign: 'center',fontSize: 20,padding: 5,width: '100%',});

外观如下：https://i.stack.imgur.com/DGmEy.png。我知道我可以将宽度设置为一个数字，但是我希望它可以随着屏幕尺寸动态变化。

解决方法

您可以尝试将width: '50%'添加到视图样式还是width: Dimensions.get('window').width / 2