如何使用React Navigation使TabNavigator按钮按下模态屏幕

Question

使用React Navigation选项卡导航器https://reactnavigation.org/docs/navigators/tab如何使其中一个选项卡按钮将屏幕推向全屏模式？我看到堆栈导航器有一个mode=modal选项.如何在单击TakePhoto选项卡按钮时使用该模式？点击它仍然显示底部的标签栏.

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal?
  },
});

Answer 1

其实,有中没有支持反应导航从动态更改演示文稿的方式default来modal(看这个的讨论在这里).我遇到同样的问题,并通过使用最顶端解决了它StackNavigator与headerMode设置为none和mode设置为modal:

const MainTabNavigator = TabNavigator(
    {
        Tab1Home: { screen: Tab1Screen },
        Tab2Home: { screen: Tab2Screen }
    }
);

const LoginRegisterStackNavigator = StackNavigator({
    Login: { screen: LoginScreen }
});

const ModalStackNavigator = StackNavigator({
    MainTabNavigator:          { screen: MainTabNavigator            },
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator }
}, {
    headerMode: 'none',
    mode:       'modal'
});

这允许我执行以下操作(使用redux)Tab1Screen并Tab2Screen从我想要的任何地方调出模态视图:

this.props.navigation.navigate('LoginScreenStackNavigator');

Answer 2

不确定这是否仍然适合您,但我已设法找到了实现这一目标.

所以我设法通过使用tabNavigatorConifg中的tabBarComponent来使其工作,您可以根据索引停止选项卡导航导航.

   tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
        <TabBarBottom
            {...props}
            jumpToIndex={index => {
                if (index === 2) {
                    navigation.navigate('camera')
                }
                else {
                    jumpToIndex(index)
                }
            }}
        />

    )

完成此操作后,我在选项卡视图上以模态方式显示视图的方法是将tabnavigator放在stacknavigatior中,然后导航到stacknavigator内的新屏幕.