после нажатия на новый Складной закрывается другой Складной, который открыт - PullRequest
0 голосов
/ 21 мая 2019

// Здесь в моем коде есть три складных объекта, после нажатия на одну из них она развернется, но чтобы закрыть ее снова, мне нужно нажать на этот конкретный текст. Я хотел бы внести изменения: если какая-либо из трех сборно-разборных единиц уже открыта, и я нажимаю новую кнопку, то существующие сборно-разборные конструкции должны автоматически закрыться.

 {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>}

Спасибо

1 Ответ

0 голосов
/ 21 мая 2019

Компонент Accordion из react-native-collapsible заботится об этом конкретном случае использования.

...