0
241
VistasEl teclado cubre el texto de entrada (una entrada vertical larga), el texto también sale de la pantalla sin que se desplace activamente (reaccionar de forma nativa)
Han pasado 7 horas, he leído todos los documentos y SO preguntas similares, por lo que agradecería cualquier ayuda.
Mi objetivo: tener una pantalla de aplicación en la que el 1/3 superior de la pantalla esté formado por componentes personalizados (no es el problema), y luego los 2/3 inferiores de la pantalla sean un campo de texto desplazable súper largo de ancho completo para el usuario para introducir varios párrafos (el problema)
El problema: el teclado en pantalla cubre el texto del campo de texto, el campo de texto no se puede desplazar, o cuando escribe y sale de la parte inferior de la pantalla, no se desplaza junto con lo que está escribiendo, o un mezcla de los 3.
Aquí hay una imagen aproximada de lo que deseo: 
Actualmente, mi código se ve así:
export default function Post() { const [text, setText] = useState(""); return ( <TouchableWithoutFeedback onPress={Keyboard.dismiss}> <SafeAreaView > <KeyboardAvoidingView enabled behavior='height' keyboardVerticalOffset={40} > <View> <TextInput scrollEnabled={true} placeholderTextColor={LIGHT} maxLength={300000} placeholder="enter text" multiline={true} onChangeText={(newVal) => setText(prev => {prev + newVal})} value={text}/> </View> </KeyboardAvoidingView> </SafeAreaView> </TouchableWithoutFeedback> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: WHITE, alignItems: 'center', justifyContent: 'flex-center', alignItems: "center", marginHorizontal: 15, // height: "100%", }, textfield: { textAlign: "left", textAlignVertical: "top", backgroundColor: "lavender", height: "100%", flex: 1, }, scroll: { // width: "100%" } });1 Respuestas
Responde la pregunta0
Un par de problemas con su enfoque y código en general.
el campo de texto no es desplazable
Colocar algo desplazable dentro de un elemento táctil es realmente extraño y rara vez se comporta como esperas, así que evítalo si es posible, o si realmente lo necesitas, pasa un onStartShouldSetResponder={() => true} a tu vista de desplazamiento interior. Pero en su caso, sospecho que en realidad no desea que el teclado se cierre si el usuario hace clic dentro de la entrada de texto, ¿verdad? Probablemente quiera agregar una palabra a una oración anterior o corregir un tipo. En su lugar, sugiero captar el toque fuera de la entrada de texto solamente, por ejemplo, en el tercio superior. Algo como esto (bocadillo de scrabble) debería funcionar:
import React, { useState } from 'react'; import { Text, View, StyleSheet, Touchable, TouchableWithoutFeedback, SafeAreaView, KeyboardAvoidingView, TextInput, Keyboard } from 'react-native'; export default function App() { const [text, setText] = useState(""); return ( <KeyboardAvoidingView style={{flex: 1, marginTop: 45}} behavior="padding"> <View style={styles.upperContainer} onTouchStart={Keyboard.dismiss}> <Text>My content in top third </Text> </View> <View style={styles.lowerContainer}> <TextInput scrollEnabled={true} placeholderTextColor={"lightgrey"} maxLength={300000} placeholder="enter text" multiline={true} onChangeText={(newVal) => setText(prev => {prev + newVal})} value={text} /> </View> </KeyboardAvoidingView> ); } const styles = StyleSheet.create({ upperContainer: { flex: 1, borderWidth: 2, borderColor: "grey", alignItems: "center", justifyContent: "center" }, lowerContainer: { flex: 2, borderColor: "black", borderWidth: 2, padding: 10 } })Observe cómo paso flex 1 y 2 a las dos vistas secundarias para darles el estilo que necesita. El borde se acaba de agregar para una mejor visibilidad.