Expo React Native项目Android端用Text组件报文本需在<Text>内渲染错误

你的babel配置中全局配置了react-native的别名映射为react-native-web，该规则会对所有运行环境生效：

• Web环境下符合预期，所以运行正常
• Android/iOS原生环境运行时，所有导入的react-native组件都会被替换为web适配版本，和原生端的渲染逻辑不兼容。原生端要求所有文本字符串必须被包裹在原生Text组件内，而web版Text组件没有适配原生渲染规则，因此直接触发「Text strings must be rendered within a component」报错。

修改babel.config.js，让react-native到react-native-web的别名仅在Web环境下生效，修改后的配置如下：

module.exports = function(api) {
  api.cache(true);
  // 仅在Web环境时启用react-native别名替换
  const isWeb = process.env.EXPO_PUBLIC_PLATFORM === 'web' || process.env.PLATFORM === 'web';
  const plugins = [];
  if (isWeb) {
    plugins.push(["module-resolver", {
      alias: {
        "^react-native$": "react-native-web"
      }
    }]);
  }
  return {
    presets: ['babel-preset-expo'],
    plugins: plugins
  };
};

• 修改配置后，执行npx expo start --clear清空babel缓存重启服务
• 重新执行yarn android运行安卓端项目即可解决报错

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