我如何使 TabNavigator 按钮使用 React Navigation 推送模态屏幕 [英] How do i make a TabNavigator button push a modal screen with React Navigation

问题描述

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

Using the React Navigation tab navigator https://reactnavigation.org/docs/navigators/tab how do I make one of the tab buttons push the screen up as a full screen modal? I see the stack navigator has a mode=modal option. how do I get that mode to be used when clicking on the TakePhoto tab button? Clicking on it currently still shows the tab bar on the bottom.

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

推荐答案

其实在 react-navigation 将动态显示方式从 default 更改为 modal(请参阅有关此 此处).我遇到了同样的问题并通过使用非常顶级的 StackNavigator 解决了它，其中 headerMode 设置为 none 和 mode设置为modal:

Actually, there is no support in react-navigation to change the way of presentation on the fly from default to modal (see the discussion about this here). I ran into the same issue and solved it by using a very top StackNavigator with headerMode set to none and mode set to 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'
});

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

This allows me to do the following (using redux) in Tab1Screen and Tab2Screen to bring up the modal view from wherever I want:

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

这篇关于我如何使 TabNavigator 按钮使用 React Navigation 推送模态屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！