मैं इन चेकबॉक्सों को बनाने के लिए 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>

मैंने कुछ अलग विकल्पों की कोशिश की, लेकिन उनमें से कोई भी दोनों पक्षों को एक साथ रखने में सक्षम नहीं था।

0
schoenbl 28 मई 2019, 03:59

1 उत्तर

सबसे बढ़िया उत्तर

एक पंक्ति में सभी आइटम दिखाने के लिए आपको चेक बॉक्स शैली का मूल दृश्य देना होगा

flexDirection: 'row'

और यदि आपके पास एक सरणी है तो आप सूची के रूप में दिखाने के लिए फ्लैटलिस्ट का उपयोग कर सकते हैं, इसमें कॉलम की संख्या दिखाने का विकल्प भी है जैसे यदि आप प्रति पंक्ति 2 चेकबॉक्स दिखाना चाहते हैं, तो आप ऐसा कर सकते हैं

<FlatList
           numColumns={2}
           ....
        />
1
Syed Murtaza 28 मई 2019, 03:48