反应导航错误（未定义不是对象（正在评估'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>
  );
}