Question

当我点击标签时，我遇到了我想要onPress事件的大问题。我的代码在这里： -

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中设置了这样的Params：

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

在此处收到错误无法获得此点击事件。

请帮帮我。

谢谢。

Answer 1

这是我的方法。它适用于react-navigation 3.x.x版本：

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

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

Answer 2

这对我有用，

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

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

Answer 3

我使用了堆栈导航器

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

///添加了tabBarOnPress

https://reactnavigation.org/docs/en/stack-actions.html popToTop操作将您带回到堆栈中的第一个屏幕，关闭所有其他屏幕。它在功能上与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();
      ]},
    }),
  }
);

如何在tabnavigator中使用tabBarOnPress做出反应原生

3 个答案: