Question

//在我的代码中，这里有三个可折叠对象，单击其中一个将展开，但是要再次关闭它，我必须单击该特定文本。我要进行更改：如果三个可折叠对象中的任何一个已经打开，然后单击新按钮，则现有的可折叠对象应自动关闭。

 {isSimUAllowed && <View style={styles.paymentMethod}>
                  <TouchableOpacity onPress={() => {
                    this.setState({ simUpgrade: !this.state.simUpgrade });
                  }}>
                    <RegularText text="SIM Upgrade" textColor={this.state.simUpgrade?'#006288':'black'} style={{fontWeight:this.state.simUpgrade?'bold':'normal'}}/>
                  </TouchableOpacity>
                  <Collapsible collapsed={!this.state.simUpgrade}>
                    <Button
                      block
                      primary
                      onPress={() => this.loadScreen('CustomerVerification', 'swap',1)}
                      style={{ marginTop: 10 }}
                    >
                      <Text>Proceed</Text>
                    </Button>
                  </Collapsible>
                </View>}
                {isSimCAllowed && <View style={styles.paymentMethod}>
                  <TouchableOpacity onPress={() => {
                    this.setState({ lostSim: !this.state.lostSim });
                  }}>
                     <RegularText text="SIM Change" textColor={this.state.lostSim?'#006288':'black'} style={{fontWeight:this.state.lostSim?'bold':'normal'}}/>
                  </TouchableOpacity>
                  <Collapsible collapsed={!this.state.lostSim}>
                    <Button
                      block
                      primary
                      onPress={() => this.loadScreen('CustomerVerification', 'lost',1)}
                      style={{ marginTop: 10 }}
                    >
                      <Text>Proceed</Text>
                    </Button>
                  </Collapsible>
                </View>}
                {isSimEAllowed && <View style={styles.paymentMethod}>
                  <TouchableOpacity onPress={() => {
                    this.setState({ validator: !this.state.validator });
                  }}>
                   <RegularText text="E-validator" textColor={this.state.validator?'#006288':'black'} style={{fontWeight:this.state.validator?'bold':'normal'}}/>
                  </TouchableOpacity>
                  <Collapsible collapsed={!this.state.validator}>
                    <Button
                      block
                      primary
                      onPress={() => this.loadScreen('CustomerVerification', 'validate',0)}
                      style={{ marginTop: 10 }}
                    >
                      <Text>Proceed</Text>
                    </Button>
                  </Collapsible>
                </View>}

谢谢

Answer 1

Accordion中的react-native-collapsible组件负责这个特殊的用例。

单击新的可折叠后，关闭其他打开的可折叠

1 个答案: