相关疑难解决方法(0)

每行显示2个项目[本机反应]

我正在学习本机反应,在所有教程中,我看到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>
    );
}
Run Code Online (Sandbox Code Playgroud)

javascript flexbox reactjs react-native

16
推荐指数
5
解决办法
3万
查看次数

标签 统计

flexbox ×1

javascript ×1

react-native ×1

reactjs ×1