我最近react-navigation
从 v5 更新到 v6。之后,我注意到它navigation.dispatch(DrawerActions.openDrawer())
不再适用于 android 设备,但适用于 iOS 设备。
const Navigation = (props) => {
return (
<NavigationContainer>
<Root.Navigator>
<Root.Screen
name='Vahginonsattuessa'
component={DrawerNav}
options={({ navigation }) => { // this part
return {
headerShown: true,
headerTransparent: true,
headerTitle: '',
headerRight: () => (
<Ionicons
testID="DrawerMenu"
name='ios-menu-outline'
size={40}
color={colors.black}
onPress={() =>
navigation.dispatch(DrawerActions.openDrawer())
}
/>
),
}
}}
/>
</Root.Navigator>
</NavigationContainer>
但是当我将根堆栈中的选项添加到底部选项卡主屏幕选项时,它也可以在 android 上运行,但是在 iOS 设备上,汉堡包按钮无法触及,无法点击。
const HomeTab = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName
if (route.name === 'Home') {
iconName = focused ? 'ios-home' : 'ios-home-outline'
} else if (route.name === 'Palvelut') {
iconName = focused ? 'ios-pin' : 'ios-pin-outline'
} else if (route.name === 'Ukk') {
iconName = focused ? 'ios-help-circle' : 'ios-help-circle-outline'
} else if (route.name === 'Omat tiedot') {
iconName = focused
? 'ios-person-circle'
: 'ios-person-circle-outline'
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />
},
tabBarActiveTintColor: colors.red,
tabBarInactiveTintColor: colors.black,
tabBarStyle: [
{
"display": "flex"
},
null
]
})}
>
<Tab.Screen name='Home' component={HomeScreen} options={{headerTitle: '', headerTransparent: true, }} /> // here in options
<Tab.Screen name='Palvelut' component={ServicesScreen} />
<Tab.Screen name='Ukk' component={UkkScreen} />
<Tab.Screen name='Omat tiedot' component={ProfileScreen} />
</Tab.Navigator>
)
}
当它回到代码之前的位置时,它应该看起来像这样,但是 android one 不起作用。
我也没有在控制台中收到任何错误。