Estoy configurando la pila de botones en función de una variable, ya sea que el canal esté unido o no. Un botón es "Unirse al canal", que es un botón de texto sin formato. El segundo botón es el botón "Finalizar llamada", que es un botón circular con un icono. Ambos tienen diferentes CSS. Cuando hago clic en "Unirse al canal", el canal se une y mi pila cambia. Luego hago clic en el botón "Finalizar llamada", pero el CSS de este botón no se elimina y se aplica al botón "Unirse al canal". El color de fondo no se elimina.

Código de representación:

 {this.state.isJoined ? this._callButtonsView() : this._joinButtonView()}

 _joinButtonView = () => { return ( <View style={styles.buttonsContainer}> <Button title="Join Channel" buttonStyle={styles.joinButton} titleStyle={{color: 'green', fontSize: 20}} onPress={() => this._joinChannel()} /> </View> ); }; _callButtonsView = () => { return ( <View style={styles.buttonsContainer}> <Button icon={{ name: 'call-end', color: '#ff0000', size: 25, }} buttonStyle={styles.actionButton} onPress={() => this._leaveChannel()} /> </View> ); };

CSS:

 actionButton: { backgroundColor: 'blue', padding: 0, height: 50, width: 50, marginRight: 25, marginTop: 5, marginBottom: 5, borderRadius: 25, }, joinButton: { backgroundColor: 'clear', },

Video: