0
364
ViewsCómo establecer la altura del botón en React Native Android
Estoy aprendiendo programación React Native para aplicaciones móviles Android. Estoy haciendo una pantalla donde necesito establecer la altura del button. Agregué un button a la view y configuré la altura del estilo de uso; sin embargo, no hay cambios en la altura del botón.
/** * LoginComponent of Myntra * https://github.com/facebook/react-native * @flow */ import React, { Component } from "react"; import { AppRegistry, Text, View, Button, TextInput } from "react-native"; class LoginComponent extends Component { render() { return ( <View style={{ flex: 1, flexDirection: "column", margin: 10 }}> <TextInput style={{ height: 40, borderColor: "gray", borderWidth: 0.5 }} placeholder="Email address" underlineColorAndroid="transparent" /> <TextInput style={{ height: 40, borderColor: "gray", borderWidth: 0.5 }} placeholder="Password" secureTextEntry={true} underlineColorAndroid="transparent" /> <View style={{ height: 100, marginTop: 10 }}> <Button title="LOG IN" color="#2E8B57" /> </View> </View> ); } } AppRegistry.registerComponent("Myntra", () => LoginComponent);¿Alguien puede ayudarme a establecer la altura del botón de acuerdo con mis requisitos?
3 answers
Answer question0
Este componente tiene opciones limitadas, por lo que no puede cambiar su tamaño a una height fija.
Te recomiendo usar el componente TouchableOpacity para construir tu propio botón, con properties y styles propios.
Puedes diseñarlo fácilmente así:
<TouchableOpacity style={{ height: 100, marginTop: 10 }}> <Text>My button</Text> </TouchableOpacity>0
Puede configurar el ancho del botón según el ancho mencionado fácilmente utilizando el siguiente método:
<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}> <Button onPress={this.buttonClickListener} title="Button Three" color="#FF3D00" /> </View> 
0
A menudo sucede que queremos cambiar las dimensiones del botón, que por defecto se extiende a todo el ancho del elemento padre. Si bien reducir su ancho no es un problema, es suficiente para reducir el ancho del padre, pero cambiar la altura ya es problemático. El elemento Button no tiene propiedad de estilo, por lo que aparte de cambiar el color del texto en iOS y el color de fondo en Android, no podemos configurar mucho en él.
Para tener más control sobre el botón, es mejor usar TouchableOpacity o TouchableNativeFeedback en su lugar.
Ejemplo de componente de la función TouchableOpacity -
import React, { useState } from "react"; import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; const App = () => { const [count, setCount] = useState(0); const onPress = () => setCount(prevCount => prevCount + 1); return ( <View style={styles.container}> <View style={styles.countContainer}> <Text>Count: {count}</Text> </View> <TouchableOpacity style={styles.button} onPress={onPress} > <Text>Press Here</Text> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", paddingHorizontal: 10 }, button: { alignItems: "center", backgroundColor: "#DDDDDD", padding: 10 }, countContainer: { alignItems: "center", padding: 10 } }); export default App;