从代码中可以看出,tabPress 没有被调用,是我做错了还是我遗漏了一些东西,不幸的是我没有找到任何 React 导航版本 5 的代码示例。
<Tab.Navigator labeled={false} barStyle={{backgroundColor: '#ffffff', height: 55}} options={{
tabPress: ({navigation}) => {
console.log('nav tab press triggered')
}
}}>
<Tab.Screen name={`DeviceNavigatorTab`} component={DeviceNavigator} options={{
tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_home-menu.png')}
style={{width: 26, height: 26, tintColor}}/>,
tabPress: ({navigation}) => {
console.log('tab press triggered')
}
}} tabPress={() => { console.log('prop tab pressed') }}/>
<Tab.Screen name={`AlarmNavigatorTab`} component={AlarmNavigator} options={{
tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_alert-circle.png')}
style={{width: 26, height: 26, tintColor}}/>,
}}/>
<Tab.Screen name={`ProfileNavigatorTab`} component={ProfileNavigator} options={{
tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_user.png')}
style={{width: 26, height: 26, tintColor}}/>,
}} />
</Tab.Navigator>
我在文档中发现了一些我以前从未见过的新内容,这是将侦听器添加到屏幕的方法,每次用户单击选项卡时,它都会转到该选项卡内的第一个堆栈屏幕
https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen
<Tab.Screen
name="DeviceNavigatorTab"
component={DeviceNavigator}
listeners={({ navigation, route }) => ({
tabPress: e => {
if (route.state && route.state.routeNames.length > 0) {
navigation.navigate('Device')
}
},
})}
/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)