У меня проблема с созданием стека-навигатора внутри tab-навигатора с реакции-навигацией

Question

Я изо всех сил пытаюсь создать представление, используя реагирующую навигацию, что BottomTabNavigator оборачивает каждый StackNavigator, но выводит ошибку: undefined is not an object (evaluating 'state.routes').

Структура приложения, которую я пытался создать, это

Приложение . js (BottomTabNavigator) ㄴ HomeScreen (React.Component и начальная маршрутизация) Um JumoonScreen (React.Component) ㄴ WalletScreen (React.Component) ㄴ ShoppingScreen (StackNavigator <- проблема вызвана) </strong>

Приложение. 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, импортированный из ShoppingScreen. js равен:

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';

до

npm install @react-navigation/stack.

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

спасибо за вашу помощь.