javascript - 连续样式映射 View react native

Question

我映射 this.props.league 来创建这些复选框

我希望每个复选框选择项从左到右排成一行。

当我有无限数量的元素时，我该如何做到这一点？

这是我的渲染:

        <View style={{marginTop: 22}}>
              <Modal
                animationType="slide"
                transparent={false}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                Alert.alert('Modal has been closed.');
                }}
              >

                <View
                    style={{
                        marginTop: 100
                    }}
                >

                    <TouchableHighlight
                        onPress={() => {
                            this.setModalVisible(!this.state.modalVisible);
                        }}
                    >
                        <Text>Hide Modal</Text>
                    </TouchableHighlight>
                        <Text>Leagues</Text>

                        {this.props.league === null ?'' : this.props.league.map(
                            (v, i) => {
                                return(
                                        <View 
                                            key={i}
                                            style={{
                                            }}
                                        >
                                            <Check
                                                checked={this.state.checked[i]}
                                                index={i}
                                                acronym={v.acronym}
                                                changeCheck={this.changeCheck}

                                            />
                                            <Text>{v.acronym}</Text>
                                        </View>
                                )
                            }
                        )}
                </View>
              </Modal>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(true);
                }}>
                <Text>Show Modal</Text>
              </TouchableHighlight>

            </View>

我尝试了几种不同的选项，但没有一个能够将两者并排放置。

Answer 1

您需要提供复选框样式的父 View 才能显示一行中的所有项目

flexDirection: 'row'

如果你有一个数组，那么你可以使用 flatlist 显示为列表，它也可以选择显示列数，就像如果你想每行显示 2 个复选框，你可以这样做

<FlatList
           numColumns={2}
           ....
        />