如何使用 react-navigation 处理 React Native App 中 TabNavigator 选项卡项的点击事件？答案

【问题标题】：How to handle click event on tab item of TabNavigator in React Native App using react-navigation?如何使用 react-navigation 处理 React Native App 中 TabNavigator 选项卡项的点击事件？
【发布时间】：2018-01-12 05:07:25
【问题描述】：

我正在编写 React Native App。我正在使用 react-navigation 来导航屏幕。

我有 2 个 Stack Navigator，它们都停留在 Tab Navigator 中。当我按下 TabBar 上的选项卡项以刷新其视图时，我想处理单击事件。

export const HomeStack = StackNavigator({
  Home: {screen: ScreenHome},
  Detail: {screen: ScreenDetail}
})
export const UserStack = StackNavigator({
  User: {screen: ScreenUser}
})
export const Tabbar = TabNavigator({
  HomeTab: {
    screen: HomeStack,
  },
  UserTab: {
    screen: UserStack,
  }   
}, {
  tabBarComponent: ({ jumpToIndex, ...props}) => (
       <TabBarBottom
          {...props}
          jumpToIndex={(index) => {
            if(props.navigation.state.index === index) {
            props.navigation.clickButton(); //----> pass props params (code processes)
          }
          else {
            jumpToIndex(index);
          }
        }
      }
    />
   ),
   tabBarPosition: 'bottom'
});
class TabClass extends Component{
  constructor(props){
    super(props)
    this.clickButton = this.clickButton.bind(this)
  }
  clickButton(){
    console.log('click button')
  }
  render (){
    return (
      <Tabbar  clickButton={()=> this.clickButton()}/>
    )
  }
}

我想将来自 TabClass 组件的 clickButton() 函数传递给处理事件单击标签栏的代码。当 if(props.navigation.state.index === index)，我希望它会调用 clickButton()。我试了一下，但它不起作用。有什么办法可以解决我的问题吗？

我试过 onNavigationStateChange(prevState, currentState)。

class TabClass extends Component{
  constructor(props){
    super(props)
    this.clickButton = this.clickButton.bind(this)
  }
  clickButton(){
    console.log('click button')
  }
  _handleNavagationStateChange(prevState, currentState){
    console.log('handle navigation state change')
  }
  render (){
    return (
        <Tabbar onNavigationStateChange={(prevState, currentState) => {
          this._handleNavagationStateChange(prevState, currentState)
        }}
        clickButton={()=> this.clickButton()}
        />
    )
  }
}

但是，_handleNavagationStateChange(prevState, currentState) 只在导航状态发生变化时运行（例如，如果我停留在 HomeTab，我点击 User Tab Item，这个函数就会运行；如果我停留在 HomeTab，我点击 Home Tab Item，这个函数不会运行）。

有什么方法可以处理标签项上的点击事件。

【问题讨论】：

标签： react-native navigation react-navigation tabnavigator ex-navigation

【解决方案1】：

从react-navigation 4.x docs，您可以在navigationOptions 中覆盖tabBarOnPress：

tabBarOnPress: ({ navigation, defaultHandler }) => {
  defaultHandler(); // Call the default handler to actually switch tabs
  // do extra stuff here
},

【讨论】：

【解决方案2】：

自定义TabBar的事件触摸时请尝试以下代码：

 import { TabBarBottom, TabNavigator, StackNavigator } from 'react-navigation';

 export const MainScreenNavigator = TabNavigator({
    Home: { screen: HomeViewContainer },
    Search: { screen: SearchViewContainer },
 }, {
   tabBarComponent: ({ jumpToIndex, ...props, navigation }) => (
     <TabBarBottom
      {...props}
             jumpToIndex = { tabIndex => {
             const currentIndex = navigation.state.index;

             if (tabIndex == 1) {
             // do some thing. Call Native Live Stream Record
             } else {
                jumpToIndex(tabIndex);
             }
             console.log('Select tab: ', tabIndex);
         }}
        />),
        tabBarPosition: 'bottom',
        });

【讨论】：

【解决方案3】：

根据最新的文档here，您可以使用navigationOptions: {navigationOptions: () => doWhatever()} 来处理标签栏点击。

【讨论】：