TabNavigator 在 react-native 中不适用于 iOS答案

【问题标题】：TabNavigator doesn't work for iOS in react-nativeTabNavigator 在 react-native 中不适用于 iOS
【发布时间】：2018-03-16 04:13:03
【问题描述】：

我无法让 TabNavigator 在 iOS 上运行，尽管它在 Android 上运行良好。这是我重现问题的步骤

打开终端窗口。

react-native init tabnav

cd tabnav

rm -rf node_modules

rm -rf package.json

rm -rf package-lock.json

然后我打开package.json，粘贴如下内容：

{
  "name": "tabnav",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
  },
  "devDependencies": {
    "babel-jest": "22.4.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.2",
    "react-test-renderer": "16.3.0-alpha.1"
  },
  "jest": {
    "preset": "react-native"
  }

然后我打开App.js并粘贴内容：

import React, { Component } from 'react';
import {TabNavigator} from 'react-navigation';
import {
  Text,
  View
} from 'react-native';
type Props = {};
class Page extends Component<Props> { 
  render() {
    return (
      <View style={{flex:1}}>
        <Text>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const Navigator = TabNavigator({
  Recent: {screen: Page},
  Popular:{screen:Page}
  }
);

export default Navigator;

然后我打开 Xcode 项目，清理并运行该项目。

然后我得到这个错误：

undefined 不是函数（近 '...(0,_reactNavigation.TabNavigator)...')

为什么选项卡导航器不起作用？

注意：如果我用堆栈导航器替换选项卡导航器的所有实例，错误就会消失。但我需要一个标签导航器，而不是堆栈导航器

【问题讨论】：

你是如何在项目中添加 react-navigation 的？
@ParasWatts 我将 "react-navigation": "git+https://github.com/react-community/react-navigation.git", 行添加到了依赖项部分下的 package.json 中。然后我输入npm install。
直接使用 npm install react-navigation --save 安装
@ParasWatts 我刚试过rm -rf node_modules; npm install react-navigation --save; npm install;。然后我清理并重新构建了项目。还是同样的问题。
"react-navigation": "^1.0.0-beta.13"，我的package.json是这样的

标签： react-native react-native-tabnavigator

【解决方案1】：

尝试从 package.json 中删除 react-navigation 包，然后安装 react-navigation。希望对您有所帮助。

完成此操作后，您会注意到 package.json 将列出特定版本的 react-natigation，而不仅仅是指向存储库的链接

【讨论】：

【解决方案2】：

v2 以上的 react-navigation 中，引入了一个新的 TabNavigator，您可以使用 createMaterialTopTabNavigator 在屏幕顶部创建 TabNavigator。

import {createMaterialTopTabNavigator} from "react-navigation";

const TabsAB = createMaterialTopTabNavigator({
Tab_A: {
    screen: ScreenA,
....

【讨论】：