React原生:意外的文本节点:,文本节点不能是< View>

csga3l58  于 2023-03-09  发布在  React
关注(0)|答案(3)|浏览(183)

我正在制作一个React原生应用程序,但遇到错误:
意外的文本节点:。文本节点不能是的子级。
我不知道这个错误指向哪个文本节点。我的目标是呈现一个视图数组。
下面是重现错误的最小代码片段:

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',
  },
});
u7up0aaq

u7up0aaq1#

问题在于,一个应该是JSX组件的函数,或者在本例中返回一个JSX组件的函数,必须是单个JSX元素,而不是JSX元素数组。
因此,您需要添加一个顶级组件,它可能只是一个片段。

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}</>
}
bf1o4zei

bf1o4zei2#

您正在返回一个视图数组。您必须将视图作为子视图返回。请尝试以下操作:

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',
  },
});
gojuced7

gojuced73#

查看React原生文档https://reactnative.dev/docs/0.65/text
“文本节点不能直接位于<View>下。”
尝试

<View>
   <MyAppText>
     Text styled with the default font for the entire application
   </MyAppText>
   <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

相关问题