我正在使用 react-native 和 reactnativation
BottomTab.Screen 在模拟器中触感良好,但在使用真实设备进行测试时,有时 Touch 工作正常,但有时无法触摸第二个 BottomTab
第二个底部标签是 component={SecondTab}
这是我的底部标签(问题是第二个底部标签)
这是我的代码
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>
);
};