0
643
ViewsEl estilo del botón React-Native no funciona
Import_this
import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';Este es mi código de React Button, pero el estilo no funciona Hare...
<Button onPress={this.onPress.bind(this)} title={"Go Back"} style={{color: 'red', marginTop: 10, padding: 10}} />También lo intenté con este código.
<Button containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: 'white'}} style={{fontSize: 20, color: 'green'}} onPress={this.onPress.bind(this)} title={"Go Back"} > Press me! </Button>Pregunta de actualización:
También lo intenté de esta manera ..
<Button onPress={this.onPress.bind(this)} title={"Go Back"} style={styles.buttonStyle} >ku ka</Button>Estilo
const styles = StyleSheet.create({ buttonStyle: { color: 'red', marginTop: 20, padding: 20, backgroundColor: 'green' } }); Pero sin salida: captura de pantalla de mi teléfono: - 
3 answers
Answer question0
El botón React Native está muy limitado en lo que puede hacer, vea; Botón
No tiene un accesorio de estilo , y no configura el texto de la "vía web" como <Button>txt</Button> sino a través de la propiedad de título <Button title="txt" />
Si desea tener más control sobre la apariencia, debe usar uno de los componentes de TouchableXXXX como TouchableOpacity . Son realmente fáciles de usar :-)
0
Tuve un problema con el margen y el relleno con un Button . Agregué Button dentro de un componente View y apliqué sus propiedades a View .
<View style={{margin:10}}> <Button title="Decrypt Data" color="orange" accessibilityLabel="Tap to Decrypt Data" onPress={() => { Alert.alert('You tapped the Decrypt button!'); }} /> </View>0
Los botones React Native son muy limitados en la opción que brindan. Puede usar TouchableHighlight o TouchableOpacity diseñando estos elementos y envolviendo sus botones con ellos de esta manera
<TouchableHighlight style ={{ height: 40, width:160, borderRadius:10, backgroundColor : "yellow", marginLeft :50, marginRight:50, marginTop :20 }}> <Button onPress={this._onPressButton} title="SAVE" accessibilityLabel="Learn more about this button" /> </TouchableHighlight>También puede usar la biblioteca de reacción para el botón personalizado. Una buena biblioteca es el botón nativo de reacción ( https://www.npmjs.com/package/react-native-button )