React Native中如何通过按钮组调用Tab Navigation的navigate方法

这个问题的核心是你的自定义Tab组件没有正确获取到navigation对象，下面给你两种可行的解决方案：

方案一：直接使用组件props中的navigation #

如果你的Tab组件是被React Navigation的导航器（比如StackNavigator）作为页面管理的，React Navigation会自动把navigation对象传入组件的props中。你只需要在updateTabIndex里调用this.props.navigation.navigate即可，注意要使用TabNavigator中定义的路由名称（也就是你写的tab1，不是组件名screen1）：

修改你的updateTabIndex方法：

updateTabIndex = tabIndex => {
  this.setState({ tabIndex });
  const { navigation } = this.props;
  switch (tabIndex) {
    case 0:
      console.log('nearby chosen');
      navigation.navigate('tab1'); // 这里用TabNavigator里定义的routeName
      break;
    case 1:
      navigation.navigate('tab2'); // 对应你定义的第二个tab的routeName
      break;
    default:
      navigation.navigate('tab3');
      break;
  }
}

另外要确保Tab组件在导航器的配置中，比如用StackNavigator包裹：

const AppNavigator = StackNavigator({
  MainTabs: {
    screen: Tab, // 你的Tab组件作为导航器的一个screen
  },
});

方案二：使用withNavigation高阶组件注入navigation #

如果你的Tab组件是根组件，没有被任何导航器管理，可以用React Navigation提供的withNavigation高阶组件给组件注入navigation对象：

1. 首先导入withNavigation：

import { TabNavigator, withNavigation } from 'react-navigation';

2. 用withNavigation包裹你的Tab组件再导出：

export default withNavigation(Tab);

之后你就可以在updateTabIndex里正常使用this.props.navigation.navigate了，用法和方案一一致。

额外注意点 #

• 调用navigate时一定要用TabNavigator中定义的路由名称（比如你代码里的tab1），而不是页面组件的名字screen1，这是新手容易踩的坑。
• 你的Tab组件的render方法里需要渲染Tabpage（也就是你定义的TabNavigator），否则切换导航后看不到对应的页面，补充后的render示例：

render() {
  return (
    <View style={{flex:1}}>
      <View style={styles.tabsview}>
        <ButtonGroup
          containerBorderRadius={40}
          selectedBackgroundColor='#FF0000'
          onPress={ this.updateTabIndex }
          selectedIndex={this.state.tabIndex}
          buttons={['screen0', 'screen1', 'screen2']}
          containerStyle={{ height: 30 }}
        />
      </View>
      <Tabpage /> {/* 渲染TabNavigator的页面内容 */}
    </View>
  )
}

内容的提问来源于stack exchange，提问作者pashute