Creé una matriz de preguntas configurada dinámicamente en la que tiene múltiples campos de entrada de texto y quiero cambiar la altura de la entrada de texto cuando aumenta el tamaño del contenido.
const[height,setHeight]=useState(44)Pero tengo entrada de texto múltiple con opción de varias líneas
<TextInput multiline height={height} placeholderText={'Question 1'}/> <TextInput multiline height={height} placeholderText={'Question 2'}/> <TextInput multiline height={height} placeholderText={'Question 3'}/> <TextInput multiline height={height} placeholderText={'Question 4'}/> <TextInput multiline height={height} placeholderText={'Question 5'}/> <TextInput multiline height={height} placeholderText={'Question 6'}/>Estos campos de entrada de texto se crean dinámicamente en función de la matriz
Escribiría condiciones que establecen la altura en función de la longitud de la cadena.
Al igual que :
Crear un componente personalizadoL
const CustomInput = ({question}) => { const[height,setHeight]=useState(5) const [response, setResponse] = useState(') useEffect(() => { if(response.length < 10) setHeight(5) if(response.length > 10 && textHeight < 20) setHeight(10) if(response.length > 20 && textHeight < 30) setHeight(30) },[height]) return (<TextInput multiline onChange={(e) => setResponse(e)} height={height} placeholderText={'Question 1'} />) }Y luego en el componente principal:
const arrayOfQuestion = ['Question1','Question2','Question3','Question4'] const ParentComponent = () => { return ( <View style={yourStyle}> {arrayOfQuestion.map((q, i) => { return CustomInput key={i} question={q} /> })} </View> ) }(Poner el índice como clave para un elemento asignado funcionará, pero no es una buena práctica. En su lugar, busque algo único, como una identificación de pregunta si su backend envía una)