反应导航错误（未定义不是对象（评估'Component.router.getStateForAction'））

Question

我正在尝试在 React Native 中创建一个简单的导航。但我不断收到这个错误，我认为这与 react Native 导航库有关。

这是我的 App.js 代码：

 import { createAppContainer } from "react-navigation";
    import { createStackNavigator } from "react-navigation-stack";
    import HomeScreen from "./src/screens/HomeScreen";
    import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";

    const Tab = createMaterialBottomTabNavigator();

    function MyTabs() {
      return (
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
        </Tab.Navigator>
      );
    }

    export default createAppContainer(MyTabs);

这是它产生的错误：

Answer 1

您在这里混合了两个版本的导航器，createAppContainer 与导航版本一起使用，createMaterialBottomTabNavigator 与导航版本 5 一起使用。如果您想使用 createMaterialBottomTabNavigator，代码应如下所示。

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

export default function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}