Estoy aprendiendo React Native y quiero crear una aplicación ( Android e IOS ) que creará los componentes dentro de la vista principal cuando se cargue la página, extrayendo los datos de cada componente de un archivo JSON.
Por ejemplo, el JSON para esa página podría tener 3 elementos de texto y una imagen, y la carga generaría esos componentes y se mostrarían en la página.
¿Sería eso posible y, de ser así, cómo debo colocar el código para hacer esto, por ejemplo, Hooks, useEffect() dentro del componente View? ¿Sería un problema, ya que creo que useEffect se llamaría dos veces, una antes de agregar los nuevos componentes y luego otra vez?
Además, idealmente, los componentes podrían estar incrustados, por ejemplo, un componente con otro incrustado para un estilo diferente o para un enlace, por ejemplo
<Text style={mainStyles.heading}>a test <Text style={mainStyles.p}>embedded</Text> text component</Text>o
<Text style={mainStyles.heading}>a URL link <Text style={mainStyles.p} onPress={() => Linking.openURL("https://www.microsoft.com")}> Microsoft</Text> text component</Text>Finalmente, al navegar entre páginas, necesitaría tener alguna forma de pasar un valor a la página entrante para que sepa qué JSON importar (es decir, en términos web, una cadena de consulta, una cookie o un valor de almacenamiento local)
¿Sería esto posible?
Puede usar <FlatList> . Esto tomará una lista de cosas y creará un "componente" tal como lo coloca para cada elemento de esa lista.
Por lo tanto, si tiene una lista de elementos y cada "elemento" tiene 4 propiedades, como: item = { text1, text2, text3, pic } Entonces su FlatList podría verse así:
<FlatList data={exampleList} keyExtractor={({ item, index }) => index} renderItem={({ item, index }) => ( <View> <Text>{item.text1}</Text> <Text>{item.text2}</Text> <Text>{item.text3}</Text> <Image source={item.pic} /> </View> )} /> Y sí, puede agregar onPress a <View> , o lo que necesite.
Entonces, ejemplos con direcciones HTTP, a menudo puede agregar datos GET, tal como lo mencionó.
Sin embargo, a menudo desea enviar datos a sus propias pantallas. En ese caso, debe tener algo de navegación en su lugar. Entonces, si actualmente puede cambiar de pantalla a través de navegar (), podría pasar parámetros adicionales. Estos serían accesibles en la segunda pantalla a través de; props.route.params
Entonces, navigate("LoadJSONPage","test42.json") y en "LoadJSONPage", puede acceder al parámetro "test42.json" a través props.route.params . Por supuesto, puede enviar múltiples parámetros, pero deberá especificar el índice al acceder; props.route.params[0] sería "test42.json"