BottomTab.Screen 有时在真实设备上不起作用

时间:2021-06-05 15:20:59

标签: javascript node.js reactjs react-native react-navigation

我正在使用 react-native 和 reactnativation

BottomTab.Screen 在模拟器中触感良好,但在使用真实设备进行测试时,有时 Touch 工作正常,但有时无法触摸第二个 BottomTab

第二个底部标签是 component={SecondTab}

这是我的底部标签(问题是第二个底部标签)

enter image description here

这是我的代码

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

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

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

    const SecondTab = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen
            name="Upload"
            component={Upload}
            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.Navigator>
      );
    };

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

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

0 个答案:

没有答案