Question

当用户点击TabNavigator中的最后一个标签（例如＆＃39;更多＆＃39;）时，我正在尝试使用DrawerNavigator。

如果没有该选项卡的屏幕，然后在componentWillMount中调用DrawerNavigator，如何实现它。

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

这是一种黑客攻击，我觉得这不是一个合适的解决方案（这种方式＆＃39;更多＆＃39;屏幕加载），必须有一个更好的解决方案。

Answer 1

这也是一些黑客，但我认为它是最简单的黑客，而不使用自定义TabBar或redux。

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

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

然后将此屏幕添加到TabNavigator，从反应导航和切换抽屉导入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中的默认TabBars，为您的抽屉设置图标/标签并使用它来切换抽屉。

Answer 2

您需要为 TabNavigator 实施自定义tabBarComponent。它是您在选项中提供的正常组件。

然后在组件中，您只需为＆＃34;更多＆＃34;定义onPress。按钮，打开抽屉。

就这么简单。

在react-navigation中是否有onNress for TabNavigator选项卡？

2 个答案: