javascript - 如果我触摸 BottomTab 它不会导航到该组件

Question

我正在使用反应式。当应用程序运行时，BottomTab 移动到 FirstTab。

但是当我触摸移动到 SecondTab 或fourTab 时，它不会移动到那个组件。

奇怪的是它在模拟器上运行良好，但在真实设备上却不行。实际设备没有任何问题。

这是我的代码

    const Stack = createStackNavigator();
    const BottomTab = createBottomTabNavigator();
    const Drawer = createDrawerNavigator();



    const FirstTab = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen
            name="Vieww"
            component={Vieww}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="Main"
            component={Main}
            options={{
              headerShown: false,
            }}
          />
        
        </Stack.Navigator>
      );
    };

    const SecondTab = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen
            name="Upload"
            component={Upload}
            options={{
              headerShown: false,
            }}
          />
        </Stack.Navigator>
      );
    };



    const fourTab = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen
            name="Four"
            component={Four}
            options={{
              headerShown: false,
            }}
          />
        </Stack.Navigator>
      );
    };

    const MainTabs = () => {
      return (
        <BottomTab.Navigator tabBarOptions={{showLabel: false}}>
          <BottomTab.Screen
            name="FirstTab"
            component={FirstTab}
            options={{
              tabBarIcon: ({color, focused}) => (
                <Image
                  source={
                    focused
                      ? require('../Assets/Images/Tabs/ic_home.png')
                      : require('..//Assets/Images/Tabs/ic_home_outline.png')
                  }
                />
              ),
            }}
          />

          <BottomTab.Screen
            name="SecondTab"
            component={SecondTab}
            options={{
              tabBarIcon: ({color, focused}) => (
                <Image
                  source={
                    focused
                      ? require('..//Assets/Images/Tabs/ic_add.png')
                      : require('..//Assets/Images/Tabs/ic_add_outline.png')
                  }
                />
              ),
            }}
          />

          <BottomTab.Screen
            name="fourTab"
            component={fourTab}
            options={{
              tabBarIcon: ({color, focused}) => (
                <Image
                  source={
                    focused
                      ? require('..//Assets/Images/Tabs/ic_favorite.png')
                      : require('..//Assets/Images/Tabs/ic_favorite_outline.png')
                  }
                />
              ),
            }}
          />
        </BottomTab.Navigator>
      );
    };

    export default () => {
      const {me} = useSelector((state) => state.user);

      return (
        <NavigationContainer linking={linking}>
          {me && me.nickname ? <MainTabs /> : <KakaoNavigator />}
        </NavigationContainer>
      );
    };

如何修复代码以解决此问题？

标签： javascriptreactjsreact-nativereact-navigation