React Native中TabNavigator在iOS端无法正常工作问题求助

我之前也碰到过一模一样的问题，核心原因其实是你安装的react-navigation版本已经废弃了直接导出TabNavigator的API，iOS端编译检测更严格所以直接抛出错误，而Android端大概率是缓存机制的问题暂时没暴露，但本质上也是存在隐患的。

问题根源 #

从react-navigation v2版本开始，官方把原来的TabNavigator拆分成了两个更明确的API：createBottomTabNavigator（底部标签导航）和createMaterialTopTabNavigator（顶部标签导航），原来的TabNavigator不再作为顶层导出方法存在，所以你代码里的import {TabNavigator} from 'react-navigation'会拿到undefined，进而触发undefined is not a function的报错。

具体修复步骤 #

1. 更新App.js的导航代码 #

把旧的TabNavigator替换成新的官方API，这里以最常用的底部标签导航为例，修改后的代码如下：

import React, { Component } from 'react';
// 导入正确的底部标签导航API
import { createBottomTabNavigator } from 'react-navigation';
import { Text, View } from 'react-native';

type Props = {};
class Page extends Component<Props> {
  render() {
    return (
      <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Welcome to React Native!</Text>
      </View>
    );
  }
}

// 使用createBottomTabNavigator替代旧的TabNavigator
const Navigator = createBottomTabNavigator({
  Recent: {screen: Page},
  Popular:{screen:Page}
});

export default Navigator;

如果需要顶部标签栏，只需要把createBottomTabNavigator替换成createMaterialTopTabNavigator即可。

2. （可选）保留原有代码结构 #

如果不想大改代码结构，可以通过别名导入的方式继续使用TabNavigator这个名称：

import { createBottomTabNavigator as TabNavigator } from 'react-navigation';

这样你的导航创建代码可以完全保留原来的写法，只是底层调用的是官方推荐的新API。

3. 确保依赖与编译缓存正常 #

有时候依赖缓存或安装不完整也会引发这类问题，建议执行以下命令重新安装依赖：

npm install

然后在Xcode中清理编译缓存：点击顶部菜单栏的Product -> Clean Build Folder，之后重新运行iOS项目即可。

补充：为什么Android能运行？ #

这是两端缓存机制的差异导致的，Android端的Metro打包缓存可能还保留了旧版本的API引用，所以暂时没报错，但后续打包更新后，Android端也会出现同样的问题，所以还是建议尽快修复API的使用方式。

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