如何在 tabnavigator react native 中使用 tabBarOnPress [英] how to use tabBarOnPress in tabnavigator react native

问题描述

我遇到了一个大问题，那就是当我点击标签时我想要 onPress 事件.我的代码在这里:-

i am stuck in big problem that is i wants onPress event when i clicked on tab. my code is here:-

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>,
  }
  }

在这里，我在 componentDidMount 中设置了这样的参数:

at here i set the Params like this in componentDidMount:

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

此处出现错误，无法获取此点击事件.

getting an error here not able to get this click event.

请帮帮我.

谢谢.

推荐答案

这是我的方法.它适用于 react-navigation 的 5.x.x 版本:

This is my approach. It works for the version 5.x.x of react-navigation:

const BottomTab = createBottomTabNavigator();
const Tabs = props => (
  <BottomTab.Navigator
    initialRouteName="Foo"
    ...
    <BottomTab.Screen
      name="Foo"
      component={Foo}
      initialParams={props.route.params}
      listeners={{
        tabPress: e => {
          // e.preventDefault(); // Use this to navigate somewhere else
          console.log("Foo tab bar button pressed")
        },
      }}
    />
  </BottomTab.Navigator>
);

详细了解听众.

对于 3.x.x 版本，我希望也是第 4 版，请使用这个.

For version 3.x.x and I hope for the 4th as well please use this one.

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

<小时>

对于 2.x.x 版本，请使用 navigationOptions 而不是 defaultNavigationOptions.

这篇关于如何在 tabnavigator react native 中使用 tabBarOnPress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！