javascript - 每行显示 2 个项目[react native]

Question

我正在学习 React Native，在我看到的所有教程中，ListView 每行仅使用 1 个项目。不过，我还没有使用过 ListView。我只有 6 个项目必须显示为平面网格，每行 2 个项目并且应该响应。我知道这是一个基本问题，但我也从我这边尝试过，可以在图片中看到

这是我的代码

 renderDeviceEventList() {
    return _.map(this.props.deviceEventOptions, deviceEventOption => (
        <View key={deviceEventOption.id}>
            <Icon
                name={deviceEventOption.icon_name}
                color="#ddd"
                size={30}
                onPress={() =>
                    this.props.selectDeviceEvent(deviceEventOption)
                }
            />
            <Text style={{ color: "#ff4c4c" }}>
                {deviceEventOption.icon_name}
            </Text>
        </View>
    ));
}
render() {
    return (
        <View
            style={{
                flex: 1,
                top: 60,
                flexDirection: "row",
                justifyContent: "space-around",
                flexWrap: "wrap",
                marginBottom: 10
            }}
        >
            {this.renderDeviceEventList()}
        </View>
    );
}

Answer 1

正确的方法是使用 flexBasis，将值设置为 (1/n)%，其中 n 是所需的行数 > 0。对于两行:

.parent {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row'
}
.child {
    flexBasis: '50%'
}