React Native报错：无法将无YogaNode的子组件添加到无测量函数父组件

我帮你分析下这个报错的原因和对应的解决办法，结合你使用的React Native 0.55.3和react-navigation 1.5.12版本，这类问题大多是文本组件的嵌套不符合React Native布局引擎Yoga的规则导致的：

报错本质 #

这个错误的核心是：你试图把纯文本节点（RCTRawText）直接添加到一个不具备文本测量能力的容器组件（这里是RCTView）中。React Native的布局系统要求所有文本内容必须被<Text>组件包裹，尤其是在0.5x这类早期版本中，这个规则执行得非常严格。

常见原因及解决方法 #

• 直接在View内放置纯文本
  如果你写了类似下面的代码，就会触发报错：

  <View>
    首页欢迎语
  </View>
  

  解决：把所有纯文本包裹在<Text>组件内：

  <View>
    <Text>首页欢迎语</Text>
  </View>
  

• JSX中的空白/换行被解析成文本节点
  有时候JSX里的换行、空格会被React解析成隐形的文本节点，比如：

  <View>
    <Text>Hello</Text>
    
    <Button title="跳转" />
  </View>
  

  上面代码中<Text>和<Button>之间的换行和空格会被当成纯文本节点，从而触发报错。
  解决：可以用以下两种方式处理：

  1. 紧凑排列组件，避免多余空白：

     <View><Text>Hello</Text><Button title="跳转" /></View>
     

  2. 用React.Fragment包裹组件（你的版本需要显式写React.Fragment，短语法<>可能不支持）：

     <View>
       <Text>Hello</Text>
       <React.Fragment>
         <Button title="跳转" />
       </React.Fragment>
     </View>
     

• React Navigation屏幕组件中的文本未包裹
  你使用的react-navigation 1.x版本中，屏幕组件的返回内容如果直接包含纯文本，也会触发这个错误。比如：

  const AppStack = StackNavigator({
    Home: {
      screen: () => "首页内容" // 错误写法
    }
  })
  

  解决：确保屏幕组件的返回内容里，所有文本都被<Text>包裹：

  const AppStack = StackNavigator({
    Home: {
      screen: () => (
        <View>
          <Text>首页内容</Text>
        </View>
      )
    }
  })
  

• 自定义组件返回纯文本
  如果你有自定义组件直接返回纯文本，也会导致报错：

  const CustomText = () => {
    return "自定义文本";
  }
  

  解决：修改为返回<Text>组件包裹的内容：

  const CustomText = () => {
    return <Text>自定义文本</Text>;
  }
  

额外提示 #

因为你使用的是React Native 0.55.3这个早期版本，Yoga引擎对文本节点的校验比新版本更严格，一些在RN 0.60+中允许的写法（比如偶尔的空白文本），在这个版本会直接报错，所以需要严格遵循文本必须包裹在<Text>组件内的规则。

内容的提问来源于stack exchange，提问作者kinjal setblue.com