Simplemente quiero cambiar el color del botón, pero no puedo. Intenté cambiar directamente en el botón y pasarle un estilo. Pero ninguno de los dos funcionó. Aquí está mi código muy simple.
export default class Dots extends Component { render() { return ( <Image style={styles.container} source={require('./background3.png')}> <Button title='play' style = {{color:'red'}}/> </Image> ); } } const styles = StyleSheet.create({ container: { flex:1, backgroundColor:'transparent', resizeMode:'cover', justifyContent:'center', alignItems:'center', width:null, height:null }, button:{ backgroundColor:'#ff5c5c', } });El componente React Button representa el botón nativo en cada plataforma que utiliza. Debido a esto, no responde al prop de style . Tiene su propio conjunto de accesorios.
La forma correcta de usarlo habría sido
<Button color="#ff5c5c" title="I'm a button!" />
Puede ver la documentación en https://facebook.github.io/react-native/docs/button.html
Ahora, supongamos que desea crear un botón súper personalizable, para eso tendrá que usar vistas y opacidad táctil. Algo parecido a esto.
<TouchableOpacity onPress={...}> {... button markup} </TouchableOpacity>Lo envolverá en su propio componente de botón y lo usará.
Creo que definitivamente es mejor usar TouchableOpacity en lugar de la etiqueta Button, ya que Button crea discrepancias de estilo en las plataformas Android e iOS.
Puede usar el código a continuación y se ve muy similar a un botón y actúa como tal:
<TouchableOpacity style={styles.button} onPress={this.onPress} > <Text> Touch Here </Text> </TouchableOpacity> const styles = StyleSheet.create({ button: { alignItems: 'center', backgroundColor: '#DDDDDD', padding: 10 } })El botón Sí no responde a los estilos. Pero la solución alternativa es que podemos usar el componente react-native-element.
Primero instale los paquetes que se mencionan a continuación
npm install react-native-elements npm i react-native-linear-gradient npm i react-native-vector-icons
Y luego importa los paquetes a tu código.
import { Button } from 'react-native-elements'; import LinearGradient from 'react-native-linear-gradient'; import Icon from 'react-native-vector-icons/FontAwesome'; <Button ViewComponent={LinearGradient} // Don't forget this! linearGradientProps={{ colors: ['#ffffff','blue', 'grey'], start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 }, }} onPress={()=> this.props.navigation.navigate('First')} title="Click me"/>Para obtener más información, aquí está el enlace: https://react-native-elements.github.io/react-native-elements/docs/button.html