2 列 Flatlist 组件未正确分配列

Question

我有一个 2 行的平面列表组件，但列分布不正确。我在设计它来实现这一点时遇到了麻烦。 我的平面列表：

<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%',
  },
});

它的样子：

我知道我可以将宽度设置为一个数字，但我希望它随着屏幕大小而动态变化。

Answer 1

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