Una de mis pantallas tiene FlatList, pero también incluye TextInput que debe permanecer en la parte superior de la página. TextInput determina qué otro componente se representa, si está vacío, es una página de categoría, pero si está lleno de texto, son los resultados de búsqueda. Mi problema en este momento es que tengo TextInput fuera de la FlatList principal, y esto hace que esté en la parte superior de la pantalla incluso cuando me desplazo por la lista. Me gustaría que permanezca en la parte superior de la página y no siga el desplazamiento.
Si coloco TextInput dentro de una de las FlatLists, hace que la otra no la tenga debido a la representación de componentes separados. Pero si lo coloco en ambas FlatLists, crea un error en el que, después de escribir el primer carácter, TextInput saldrá del modo de edición ya que se está procesando un componente completamente nuevo.
Aquí está la estructura que tengo ahora:
<View> <TextInput /> <View> {conditional check ? ( <FlatList /> : (<View> <FlatList /> </View> }Entonces, ¿cómo dicen los documentos que FlatList tiene accesorios llamados ListHeaderComponent para mostrar en la parte superior de la lista un componente? https://reactnative.dev/docs/flatlist
//textinput component const input = () => { <View> <TextInput /> </View> }; <FlatList listHeaderComponent={input} data={/* data or another type of array */} renderItem={ /* put here what you want to be scrollable */ } />Si lo entendí correctamente, si desea desplazar TextInput con la lista, debe envolver TextInput y todo dentro de ScrollView y, en lugar de usar FlatList , mapear los datos que se procesarán y pasarlos al componente secundario como se muestra a continuación.
<ScrollView> <TextInput /> {conditional check ? ( {data1.map((item,index)=> <ChildComponent1/> //renderItem in FlatList 1 )}): (<View> {data2.map((item,index)=> <ChildComponent2/> //renderItem in FlatList 2 )} </View>) } <ScrollView>