comment utiliser tabBarOnPress dans le tabnavigator react native

Question

Je suis coincé dans un gros problème qui est que je veux l'événement onPress quand j'ai cliqué sur l'onglet. mon code est ici:-

static navigationOptions = ({navigation, screenProps}) => {
   const params = navigation.state.params || {};
   console.log("Params:-",params);
  return {
        title:Strings.title_dashboard,
        headerStyle:{ backgroundColor: Colors.header_blue},
        headerTitleStyle:HeaderStyle.titleCenter,
        tabBarOnPress: (tab, jumpToIndex) => {
           console.log("Tab Click",tab);
            jumpToIndex(tab.index);
            navigation.state.params.onFocus()
        },
       headerRight:<TouchableOpacity onPress={()=>Alert.alert(Strings.avanza,Strings.under_imple)}><View><Image source={{uri: "filter_icon"}} style={{height: 18, width: 18,marginRight:10,}} /></View></TouchableOpacity>,
  }
  }

Ici, j'ai défini les paramètres comme ceci dans componentDidMount :

this.props.navigation.setParams({
      handleGrid: this.callServer.bind(this)
    })

Je reçois une erreur ici, je ne peux pas obtenir cet événement de clic.

Aidez-moi, s'il vous plaît.

Merci.

Answer 1

Voici mon approche. Elle fonctionne pour la version de react-navigation 3.x.x :

let Tabs = createBottomTabNavigator(
  {
    FooTab: Foo,
  },
  {
    initialRouteName: "FooTab",
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarOnPress: ({ navigation, defaultHandler }) => {
        console.log('onPress:', navigation.state.routeName);
        defaultHandler()
      },
    }),
  }
);

Pour la version 2.x.x, veuillez utiliser navigationOptions au lieu de la defaultNavigationOptions .

Answer 2

Cela fonctionne pour moi,

static navigationOptions = ({ navigation }) => {
       return {
            tabBarOnPress: ({previousScene, scene, jumpToIndex}) => {
                const { route, index, focused} = scene;

                if(focused){
                    navigation.state.params.scrollToTop()
                }
                jumpToIndex(0)
            }
        }
 };

Answer 3

J'ai utilisé le navigateur de pile

const Stack = createStackNavigator({
    ScreenA: {
        screen:ScreenA ,
        navigationOptions: () => ({
            header: null
        }),
    },
    ScreenB: {
        screen:ScreenB ,
        navigationOptions: () => ({
            header: null
        }),
    },
});

//Ajouté tabBarOnPress

https://reactnavigation.org/docs/en/stack-actions.html l'action popToTop vous ramène au premier écran de la pile, en rejetant tous les autres. Elle est fonctionnellement identique à StackActions.pop({n : currentIndex}).

import { StackActions } from 'react-navigation';
let Tabs = createBottomTabNavigator(
  {
    FooTab: Foo,
  },
  {
    initialRouteName: "FooTab",
    defaultNavigationOptions: ({ navigation }) => ({
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      // to navigate to the top of stack whenever tab changes
      navigation.dispatch(StackActions.popToTop());
      defaultHandler();
      ]},
    }),
  }
);