在反应导航中是否存在用于TabNavigator选项卡的onPress? [英] Is there an onPress for TabNavigator tab in react-navigation?

问题描述

当用户点击TabNavigator中的最后一个选项卡(例如更多")时，我正在尝试使用DrawerNavigator.

I am trying to have a DrawerNavigator when user taps on the last tab(for example 'More') in TabNavigator.

如何在没有该选项卡的屏幕的情况下实现该目标，然后在componentWillMount中调用DrawerNavigator.

How is this possible to achieve it without having a screen for that tab and then calling the DrawerNavigator in componentWillMount.

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

我认为这是一种不合适的解决方案(这种方式会加载更多"屏幕)，为此必须有一个更好的解决方案.

It is kind of a hack which is not proper solution I think(This way 'More' screen is loaded), there has to be a better solution for that.

推荐答案

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

This is also a bit of hack but I think its the simplest hack without using a custom TabBar or redux.

您可以做的是创建一个渲染为空的屏幕组件

What you can do is to create a screen component rendering null

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

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

Then add this screen to your TabNavigator, import TabBars from react-navigation and toggle drawer for certain index.

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，为抽屉提供一个图标/标签，并使用它来切换抽屉.

This way you simple continue using default TabBars from react-navigation, have an icon/label for your drawer and use it to toggle drawer.

这篇关于在反应导航中是否存在用于TabNavigator选项卡的onPress?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！