样式映射视图连续响应本机

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

您需要为复选框样式提供父视图，以便连续显示所有项目

flexDirection: 'row'

如果您有一个数组，则可以使用平面列表显示为列表，它还可以选择显示列数，例如，如果您希望每行显示2个复选框，则可以这样做

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