React Navigation native Navigation V5 Appuyez sur ne pas fonctionner

Question

Comme on le voit sur le code, Tabpress n'est pas appelé, je le fais mal ou que je manque quelque chose, malheureusement, je n'ai pas trouvé d'échantillons de code pour réagir la version 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>

Answer 1

Vous devez écouter/vous abonner à un événement "Tabpress" comme ci-dessous dans votre composant.

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', e => {
    // Prevent default behavior
    e.preventDefault();

    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);