0
314
Views¿Cómo agregar un botón en React Native?
Estoy confundido con todo esto de "sin CSS", pero entiendo por qué es beneficioso. Todo lo que quiero hacer es colocar un botón en el medio de la pantalla, pero todavía no entiendo cómo funciona el estilo en React. Este es mi código:
var tapSpeed = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Tap me as fast as you can! </Text> <View style={styles.button}> ! </View> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFCCCC' }, welcome: { fontSize: 20, textAlign: 'center', margin: 10 }, button: { textAlign: 'center', color: '#ffffff', marginBottom: 7, border: 1px solid blue, borderRadius: 2px } });
·
Santiago Trujillo
3 answers
Answer question0
Actualización: use el componente de botón incorporado.
Obsoleto:
Envuelva su vista en TouchableHighlight para iOS y TouchableNativeFeedback para Android.
var { Platform, TouchableHighlight, TouchableNativeFeedback } = React; var tapSpeed = React.createClass({ buttonClicked: function() { console.log('button clicked'); }, render: function() { var TouchableElement = TouchableHighlight; if (Platform.OS === 'android') { TouchableElement = TouchableNativeFeedback; } return ( <View style={styles.container}> <Text style={styles.welcome}> Tap me as fast as you can! </Text> <TouchableElement style={styles.button} onPress={this.buttonClicked.bind(this)}> <View> <Text style={styles.buttonText}>Button!</Text> </View> </TouchableElement> </View> ); } });
·
Santiago Trujillo
Report
0
Puede usar el elemento de botón nativo de reacción incorporado.
import React, { Component } from 'react'; import { StyleSheet, View, Button, Alert, AppRegistry } from 'react-native'; class MainApp extends Component { _onPress() { Alert.alert('on Press!'); } render() { return ( <View style={styles.container}> <View style={styles.buttonContainer}> <Button onPress={this._onPress} title="Hello" color="#FFFFFF" accessibilityLabel="Tap on Me"/> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF' }, buttonContainer: { backgroundColor: '#2E9298', borderRadius: 10, padding: 10, shadowColor: '#000000', shadowOffset: { width: 0, height: 3 }, shadowRadius: 10, shadowOpacity: 0.25 } }) AppRegistry.registerComponent('MainApp', () => MainApp); 
Lea más aquí .
·
Santiago Trujillo
Report
0
El paquete react-native-button proporciona un botón que tiene el estilo de un botón nativo. Instálelo con npm install react-native-button y utilícelo en su componente de esta manera:
var Button = require('react-native-button'); var ExampleComponent = React.createClass({ render() { return ( <Button style={{borderWidth: 1, borderColor: 'blue'}} onPress={this._handlePress}> Press Me! </Button> ); }, _handlePress(event) { console.log('Pressed!'); }, });
·
Santiago Trujillo
Report
Answer question