在 React Native 上使用 flexBox 的 2 列布局答案

【问题标题】：2 column layout with flexBox on React Native在 React Native 上使用 flexBox 的 2 列布局
【发布时间】：2018-11-22 22:07:33
【问题描述】：

我正在尝试在 React Native 中从项目列表中进行两列布局。它似乎只在我定义项目的宽度时才起作用，我只想定义父宽度的百分比（0.5 将构成 2 列布局，但 0.25 将构成 4 列布局）。这个可以吗？

export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, {width:width}]}>
        <View style={styles.item}><Text>{'item1'}</Text></View>
        <View style={styles.item}><Text>{'item2'}</Text></View>
        <View style={styles.item}><Text>{'item3'}</Text></View>
        <View style={styles.item}><Text>{'item4'}</Text></View>
        <View style={styles.item}><Text>{'item4'}</Text></View>
        <View style={styles.item}><Text>{'item5'}</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item :{
    flex: 0.5, //why this doesnt work???
    // width: 150, //using fixed item width instead of flex: 0.5 works
    height: 100,
    padding: 10,
    backgroundColor: 'red',
    // flexGrow: 1,
    // flexShrink: 0,
  }
});

你可以在这里玩：https://snack.expo.io/SyBjQuRxm

等效的 Css 工作：https://codepen.io/klamping/pen/WvvgBX?editors=110

显然我可以为每一列创建一个容器，但这不是重点：

render() {
    return (
      <View style={[styles.container, {width:width}]}>
        <View style={styles.column1}>
             <View style={styles.item}><Text>{'item1'}</Text></View>
             <View style={styles.item}><Text>{'item2'}</Text></View>
             <View style={styles.item}><Text>{'item3'}</Text></View>
        </View>
        <View style={styles.column2}>
             <View style={styles.item}><Text>{'item4'}</Text></View>
             <View style={styles.item}><Text>{'item4'}</Text></View>
             <View style={styles.item}><Text>{'item5'}</Text></View>
        </View>
      </View>
    );
  }

【问题讨论】：

您介意更新这些链接吗？他们不再工作了，谢谢！

标签： react-native flexbox

【解决方案1】：

您可以尝试使用 flatlist 的滚动视图。下面的代码生成 2 列。如果你想要 3 列更改 numcolumn={data.length/3} 等。

             <ScrollView
              horizontal
              showsVerticalScrollIndicator={false}
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={{
                flexDirection: 'row',
                flexWrap: 'wrap',
              }}>
              <FlatList
                data={data}
                renderItem={this.renderItem}
                keyExtractor={item => `${item.id}`}
                showsHorizontalScrollIndicator={false}
                numColumns={data.length / 2}
              />
            </ScrollView>

【讨论】：

【解决方案2】：

如果您对宽度使用百分比值，这是可能的：

<View style={styles.container}>
  <View style={styles.item}>
    ...
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start' // if you want to fill rows left to right
  },
  item: {
    width: '50%' // is 50% of container width
  }
})

【讨论】：

完美运行，不知何故我完全忘记了宽度百分比。谢谢！
如果您必须在每个列项之间添加间距，该怎么做？（不使用绝对填充或边距）
@jaimish11 要实现这一点，您可以尝试在容器上设置 justifyContent: 'space-between'，并将项目宽度减小到 48% 而不是 50%。