求助：将返回StackNavigator的React组件作为TabNavigator屏幕致Android崩溃

嘿，这个问题我之前帮不少开发者排查过——Android端炸这个错但iOS正常，确实和JSX格式脱不了干系，毕竟React Native的Yoga布局引擎在Android上的校验比iOS严格得多。

先搞懂报错的本质 #

这个报错翻译过来就是：你试图把一个没有YogaNode的文本节点（ReactRawTextShadowNode），加到了一个没有测量函数的父容器（LayoutShadowNode）里。简单说就是：你有纯文本直接放在了View、ScrollView这类不能直接承载文本的组件里，iOS会偷偷帮你兼容，但Android的Yoga引擎不吃这一套，直接报错。

结合你的场景排查问题 #

你提到主TabNavigator里用到了ContactScreen，那问题大概率出在这两个地方：

1. ContactScreen组件内部的JSX错误 #

最常见的情况是，你的ContactScreen里有纯文本没有用<Text>组件包裹，比如：

// ❌ 错误写法：View直接放文本
const ContactScreen = () => (
  <View>
    联系人列表标题
    <FlatList data={contacts} renderItem={({item}) => <Text>{item.name}</Text>} />
  </View>
);

Android会把“联系人列表标题”这个纯文本当成非法子节点，直接触发报错。

2. TabNavigator的配置问题 #

检查你TabNavigator里每个screen的navigationOptions，有没有直接返回文本的情况，比如自定义tabBarLabel或者tabBarIcon时，把文本直接丢进去了：

// ❌ 可能出问题的写法（旧版react-navigation更常见）
const CustomTabs = TabNavigator({
  Contact: {
    screen: ContactScreen,
    navigationOptions: {
      tabBarLabel: "联系人" // 直接放字符串，Android可能不兼容
    }
  }
});

具体修复方案 #

针对上面的两种情况，分别修复：

修复组件内的纯文本 #

把所有直接放在容器里的纯文本，都用<Text>组件包裹：

// ✅ 正确写法
const ContactScreen = () => (
  <View>
    <Text>联系人列表标题</Text>
    <FlatList data={contacts} renderItem={({item}) => <Text>{item.name}</Text>} />
  </View>
);

修复TabNavigator的配置 #

如果是tabBarLabel的问题，把字符串改成返回<Text>组件的函数（适配旧版react-navigation，新版可能直接支持字符串，但保险起见这么写）：

// ✅ 正确的navigationOptions配置
const CustomTabs = TabNavigator({
  Contact: {
    screen: ContactScreen,
    navigationOptions: {
      tabBarLabel: () => <Text>联系人</Text>
    }
  }
});

额外排查点 #

如果你用了自定义的TabBar组件，也要仔细检查组件内部的JSX，有没有纯文本直接作为容器的子元素，比如自定义tab项里的文本有没有包在Text里。

总的来说，这个问题就是Android对文本节点的承载要求更严格，只要确保所有文本都在<Text>组件内部，不要直接丢给View这类容器，就能解决啦。

内容的提问来源于stack exchange，提问作者Nicolas Garnier