React native 使用版本来应对导航问题

我尝试在主屏幕上的应用程序中添加底部导航时遇到问题：

这是主屏幕代码：

// Main.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import firebase from 'react-native-firebase';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

export default class Main extends React.Component {
  state = { currentUser: null }
  componentDidMount() {
    const { currentUser } = firebase.auth()
    this.setState({ currentUser })
}
  render() {
    const { currentUser } = this.state

  return (
      <View style={styles.container}>
        <Text>
          Hi {currentUser && currentUser.email}!
        </Text>

      </View>

    )
  }
}
 const bottomTabNavigator = createBottomTabNavigator(
  {
    Main: Main,
  },
  {
    initialRouteName: 'Main'
  }
);


const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }
  })

但显然react导航无法更新到4.11以上，或者至少npm页面上是这么说的

24663 版本

4.1.1 许可证

麻省理工学院 未包装尺寸

41 kB 文件总数

十二, 问题

133 拉取请求

三,

所以我有点迷路了。有人知道我做错了什么吗

非常感谢

---

Tim

您使用的是react navigation v5依赖项，但在代码中，您是以v4 api方式实现的

您应该将react导航依赖项更改为v4，以使代码正常工作

我让你在零食上工作：

    Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/en/hello-react-navigation.html for usage guide.

<unknown>
    index.bundle?platform=ios&dev=true&minify=false:109707:24
<global>
    Main.js:24
loadModuleImplementation
    require.js:322:6
guardedLoadModule
    require.js:201:45
runUpdatedModule
    require.js:657:17
metroHotUpdateModule
    require.js:533:8
define
    require.js:53:24
global code
    Main.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:4
<unknown>
    [native code]:0
inject
    injectUpdate.js:62:35
forEach
    [native code]:0
injectUpdate
    injectUpdate.js:71:26
on$argument_1
    HMRClient.js:40:21
emit
    index.js:202:37
_ws.onmessage
    WebSocketHMRClient.js:72:20
EventTarget.prototype.dispatchEvent
    event-target-shim.js:818:39
_eventEmitter.addListener$argument_1
    WebSocket.js:232:27
emit
    EventEmitter.js:190:12
callFunctionReturnFlushedQueue
    [native code]:0

{
  "name": "kowop",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/bottom-tabs": "^5.0.3",
    "@react-navigation/material-bottom-tabs": "^5.0.1",
    "@react-navigation/native": "^5.0.1",
    "email-validator": "^2.0.4",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-firebase": "^5.6.0",
    "react-native-gesture-handler": "^1.5.6",
    "react-native-paper": "^3.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.6.4",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.1.1",
    "react-navigation-stack": "^2.0.16",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@babel/core": "7.8.3",
    "@babel/runtime": "7.8.3",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "^6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}