Estoy trabajando con react-native y he creado un elemento Alert.
Alert.alert( 'Warning', 'bla bla bla', [ {text: 'OK', onPress: () => console.log('OK Pressed')}, ] )Ahora me gustaría aplicarle algo de estilo. Digamos que quiero aplicarle un color de fondo rojo y un color blanco para el texto.
¿Cómo puedo conseguir esto? ¿Es posible?
En realidad, hay una manera de personalizar el texto en los botones, pero está limitado a lo que se proporciona... A continuación se muestra la definición de tipo de React Native. Luego, un ejemplo simple que muestra un botón rojo. Básicamente, el "predeterminado" es azul, "cancelar" está en negrita pero sigue siendo azul y "destructivo" es rojo.
** * An Alert button style */ export type AlertButtonStyle = $Enum<{ /** * Default button style */ 'default': string, /** * Cancel button style */ 'cancel': string, /** * Destructive button style */ 'destructive': string, }>; Alert.alert("Look out!", "Hitting reset will wipe all the app's data on your phone. This cannot be undone!", [ {text: 'Reset', onPress: this._doSomethingSerious, style: 'destructive'}, {text: 'Cancel'}, ], {cancelable: false} )Puede usar una biblioteca personalizada como react-native-modalbox .
Podrás diseñar el modal como quieras:
<Modal style={{background: 'red'}} ref={"modal1"}> <Text style={{color: 'white'}}>Basic modal</Text> <Button onPress={this.toggleSwipeToClose} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button> </Modal>Puedes abrir el modal usando
openModal1(id) { this.refs.modal1.open(); }Mira el ejemplo para ver más opciones.
Bonificación : si desea encontrar una buena biblioteca para react-native, pruebe js.coach