Estoy trabajando para hacer una aplicación React Native y recibo el error:
Nodo de texto inesperado: . Un nodo de texto no puede ser hijo de una <Vista>.
No puedo averiguar a qué nodo de texto se refiere este error. Mi objetivo es representar una variedad de vistas.
Aquí hay un fragmento de código mínimo que reproduce el error:
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; function fun() { const views = []; const style = {backgroundColor: 'red', height: 100, width: 100}; for (let i=0; i<3; i++) { views.push( <View key={i} style={style}/> ) } return views; } export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <View> {fun()} </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });El problema es que una función que se supone que es un componente JSX, o en este caso devolver un componente JSX, debe ser un elemento JSX único y no una matriz de elementos JSX.
Por lo tanto, debe agregar un componente de nivel superior que podría ser solo un fragmento.
function fun() { const views = [] const style = { backgroundColor: "red", height: 100, width: 100 } for (let index = 0; index < 3; index++) { views.push(<View key={index} style={style} />) } return <>{views}</> }Está devolviendo una serie de vistas. Debe devolver vistas como los niños. Prueba algo como:
function fun() { const style = { backgroundColor: "red", height: 100, width: 100 }; return [0, 1, 2].map(() => <View key={i} style={style} />); } export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <View> {fun()} </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });