0
303
Vistas¿Cómo agregar una ventana emergente de información para TextInput en React Native?
Quiero lograr algo como esto en React Native:
Tengo un componente TextInput y quiero poner un icono en el lado derecho. El usuario puede hacer clic en él, luego puedo mostrar algún texto en un modal o en otro componente.
¿Es esto posible en reaccionar nativo?
return( <View style={styles.container}> <TextInput placeholder="Állat neve" value={AllatNev} style={styles.textBox} onChangeText={(text) => setAllatNev(text)} /> </View> ); } ) const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: color_theme_light.bodyBackground justifyContent: 'center', alignItems:'center' }, textBox:{ borderWidth:2, borderColor: color_theme_light.textBoxBorder, margin:15, borderRadius:10, padding: 10, fontFamily:'Quicksand-Medium' }, });2 Respuestas
Responde la pregunta0
Sí, puede colocar su botón de información sobre TextInput usando el posicionamiento absoluto y un zIndex, por ejemplo:
import * as React from 'react'; import { Text, View, StyleSheet, TextInput, TouchableOpacity } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={styles.textBoxParent}> <TextInput style={styles.textBox} placeholder="Állat neve"/> <TouchableOpacity style={styles.textBoxButton} onPress={() => { //launch your modal }}> <Text>i</Text> </TouchableOpacity> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1', padding: 8, }, textBoxParent: { justifyContent: 'center' }, textBox:{ borderWidth:2, borderColor: 'gray', margin:15, borderRadius:10, padding: 10, }, textBoxButton: { position: 'absolute', right: 20, zIndex: 100, width: 20, height: 20, borderWidth: 1, borderRadius: 10, justifyContent: 'center', alignItems: 'center' } });Ejemplo de trabajo: https://snack.expo.dev/OFMTc8GHE
0
Aquí tienes un ejemplo completo de lo que quieres ( https://snack.expo.dev/bjzBFuE4W ). Y más abajo explico el código.
Primero hice un Modal de reaccionar nativo que toma modalVisible, setModalVisible y aparece cuando modalVisible es verdadero.
import * as React from 'react'; import { Text, View, StyleSheet,TextInput ,TouchableOpacity,Modal} from 'react-native'; import { AntDesign } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons'; const ModalInfo = ({modalVisible, setModalVisible})=>{ return ( <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { setModalVisible(!modalVisible); }} > <View style={{ flex: 1, justifyContent: "center", alignItems: "center", }}> <View style={{ width:200,height:200,backgroundColor:"gray",borderWidth:2, justifyContent:"center",alignItems:"center" }} > <TouchableOpacity onPress={()=>{setModalVisible(false)}}> <MaterialIcons name="cancel" size={24} color="black" /> </TouchableOpacity> </View> </View> </Modal> ) }A continuación, hice una vista para ajustar la entrada de texto para que también pueda agregar un svg del icono de información. Y luego configure la vista exterior para que tenga flexDirection: "fila", de modo que todo se ordene de la manera que desee.
const TextInputWithModal = ()=>{ const [modalVisible, setModalVisible] = React.useState(false); const [AllatNev,setAllatNev]= React.useState(""); return ( <View style={styles.textInputContainer}> <TextInput placeholder="Állat neve" value={AllatNev} style={styles.textBox} onChangeText={(text) => setAllatNev(text)} /> <TouchableOpacity onPress={()=>{setModalVisible(true)}}> <AntDesign name="infocirlceo" size={24} color="black" /> </TouchableOpacity> <ModalInfo modalVisible={modalVisible} setModalVisible={setModalVisible}/> </View> ) } export default function App() { return ( <View style={styles.container}> <TextInputWithModal/> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems:"center", }, textInputContainer:{ borderRadius:10, padding: 10, flexDirection:"row", margin:15, borderWidth:2, }, textBox:{ fontFamily:'Quicksand-Medium', marginRight:20, }, });