我在用react-navigation在tab-navigator内制作stack-navigator时遇到问题

Question

我正在竭力使用BottomTabNavigator包装每个StackNavigator的react-navigation创建视图，但它显示错误：undefined is not an object (evaluating 'state.routes')。

我尝试制作的应用程序结构是

App.js（BottomTabNavigator）ㄴHomeScreen（反应组件和初始路由）um JumoonScreen（反应组件）et WalletScreen（反应组件）ㄴShoppingScreen（StackNavigator

App.js代码是：

const TabBar = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <TabBar.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === '홈') {
              return <Feather
                name='home' size={22} color={color} />;
            } else if (route.name === '주문내역') {
              return <Ionicons
                name='ios-list' size={22} color={color} />;
            } else if (route.name === '내 지갑') {
              return <SimpleLineIcons
                name='wallet' size={21} color={color} />;
            } else if (route.name === '쇼핑') {
              return <SimpleLineIcons
                name='handbag' size={22} color={color} />;
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: '#0098EB',
          inactiveTintColor: '#999999',
        }}>

        <TabBar.Screen name="홈" component={HomeScreen} />
        <TabBar.Screen name="주문내역" component={JumoonScreen} />
        <TabBar.Screen name="내 지갑" component={WalletScreen} />
        <TabBar.Screen name="쇼핑" component={ShoppingScreen} />
      </TabBar.Navigator>
    </NavigationContainer>
  );
}

并且从ShoppingScreen.js导入的ShoppingScreen组件是：

class FirstSubScreen extends Component {
  render() {
    return (
      <View>
        <Text>
          sample text
              </Text>
      </View>
    );
  }
}

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Stack = createStackNavigator();

    return (
      <NavigationContainer independent={true}>
        <Stack.Navigator>
          <Stack.Screen name="샘플" component={FirstSubScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

但是，如果我像这样使ShoppingScreen.js正常运行。

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Tab = createMaterialTopTabNavigator();

    return (
      <NavigationContainer independent={true}>
        <Tab.Navigator>
          <Tab.Screen name="샘플" component={FirstSubScreen} />
        </Tab.Navigator>
      </NavigationContainer>

    );
  }
}

我的代码怎么了？

Answer 1

我自己通过纠正解决了

import { createStackNavigator } from 'react-navigation-stack';

to

npm install @react-navigation/stack。

import { createStackNavigator } from '@react-navigation/stack';

感谢您的帮助。