0
178
Vistas¿Cómo construyo una entrada de texto en reaccionar nativo que tiene un marcador de posición que cambia a una vista de texto en la parte superior cuando se hace clic en
Soy un poco nuevo para reaccionar nativo y tengo un problema con el que necesito ayuda
¿Cómo construyo una entrada de texto en reaccionar nativo que tiene un marcador de posición que cambia a una vista de texto en la parte superior cuando se hace clic? Similar a la captura de pantalla a continuación
el campo de entrada de texto vacío se ve así en su estado predeterminado
campo de texto con datos ingresados
vea que el texto de entrada vacío tiene un marcador de posición que aparece en el medio del campo de texto de entrada
vea el segundo diagrama, el texto del marcador de posición se mueve a la parte superior del campo de entrada una vez que el usuario comienza a escribir texto en el campo de entrada
2 Respuestas
Responde la pregunta0
La forma más fácil es usar el paquete react-native-paper con su entrada de texto:
import * as React from 'react'; import { TextInput } from 'react-native-paper'; const MyComponent = () => { const [text, setText] = React.useState(''); return ( <TextInput label="Email" value={text} onChangeText={text => setText(text)} /> ); }; export default MyComponent;Resultado:
0
Esto es lo que uso sin ninguna biblioteca, ejemplo de trabajo y si desea agregar animación a los campos, ejemplo de trabajo con animación
import React, { Component } from 'react'; import { View, StatusBar, TextInput, Text, } from 'react-native'; class FloatingLabelInput extends Component { state = { isFocused: false, }; handleFocus = () => this.setState({ isFocused: true }); handleBlur = () => this.setState({ isFocused: false }); render() { const { label, ...props } = this.props; const { isFocused } = this.state; const labelStyle = { position: 'absolute', left: 0, top: !isFocused ? 18 : 0, fontSize: !isFocused ? 20 : 14, color: !isFocused ? '#aaa' : '#000', }; return ( <View style={{ paddingTop: 18 }}> <Text style={labelStyle}> {label} </Text> <TextInput {...props} style={{ height: 26, fontSize: 20, color: '#000', borderBottomWidth: 1, borderBottomColor: '#555' }} onFocus={this.handleFocus} onBlur={this.handleBlur} blurOnSubmit /> </View> ); } } export default class App extends Component { state = { value: '', }; handleTextChange = (newText) => this.setState({ value: newText }); render() { return ( <View style={{ flex: 1, padding: 30, backgroundColor: '#f5fcff' }}> <StatusBar hidden /> <FloatingLabelInput label="Email" value={this.state.value} onChangeText={this.handleTextChange} /> </View> ); } }