反应导航中是否有 TabNavigator 选项卡的 onPress？

Question

我正在尝试在用户点击 TabNavigator 中的最后一个选项卡（例如 'More'）时使用 DrawerNavigator。

如果没有该选项卡的屏幕然后调用 componentWillMount 中的 DrawerNavigator，这怎么可能实现它。

componentWillMount() {
   this.props.navigation.navigate("DrawerOpen") 
}

我认为这是一种黑客攻击，不是正确的解决方案（这样 'More' 屏幕已加载），必须有更好的解决方案。

Answer 1

您需要为 TabNavigator 实施自定义 tabBarComponent。这是您在选项中提供的普通组件。

然后在组件中，您只需为 "More" 按钮定义 onPress，它会打开抽屉。

就这么简单

Answer 2

这也是一些技巧，但我认为这是最简单的技巧，无需使用自定义 TabBar 或 redux。

你可以做的是创建一个屏幕组件呈现空值

export default class More extends Component {
  render() {
    return null;
  }
}

然后将此屏幕添加到您的 TabNavigator，从 react-navigation 导入 TabBars 并为特定索引切换抽屉。

import { TabBarBottom, TabBarTop } from 'react-navigation';

const TabBar = Platform.OS === 'ios' ? TabBarBottom : TabBarTop;

const Navigator = TabNavigator({
  Tab1: { screen: Tab1 },
  Tab2: { screen: Tab2 },
  Tab3: { screen: Tab3 },
  More: { screen: More }
}, {
  tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
        <TabBar
            {...props}
            jumpToIndex={index => {
                if (index === 3) {
                    navigation.navigate('DrawerToggle'); //Toggle drawer
                }
                else {
                    jumpToIndex(index)
                }
            }}
        />
    )
});

通过这种方式，您可以简单地继续使用 react-navigation 中的默认 TabBar，为您的抽屉设置 icon/label 并使用它来切换抽屉。

反应导航中是否有 TabNavigator 选项卡的 onPress？

Is there an onPress for TabNavigator tab in react-navigation?

tabnavigator

reactjs

react-native

react-navigation