React Native：意外的文本节点：。文本节点不能是 <View> 的子节点

Question

我正在制作 React Native 应用程序，但出现错误：

Unexpected text node: . A text node cannot be a child of a <View>.

我无法弄清楚这个错误指的是哪个文本节点。我的目标是呈现一组视图。

这是重现错误的最小代码片段：

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

Answer 1

您正在return查看一组视图。您必须 return 观看 children。尝试类似的东西：

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

Answer 2

问题是一个函数应该是一个 JSX 组件，或者在这种情况下 return 一个 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}</>
}

React Native：意外的文本节点：。文本节点不能是 <View> 的子节点

React Native: Unexpected text node: . A text node cannot be a child of a <View>

javascript

textview

jsx

react-native