开发者问题收集

如何使用 React Navigation 让 TabNavigator 按钮推送模态屏幕

2017-02-22
18682

使用 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?
  },
});
3个回答

实际上, react-navigation 中不支持将呈现方式从 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'
});

这使我可以在 Tab1ScreenTab2Screen 中执行以下操作(使用 redux),以从我想要的任何位置调出模态视图:

this.props.navigation.navigate('LoginScreenStackNavigator');
Thomas Kekeisen
2017-03-20

不确定这对您是否仍然有用,但我已经设法找到实现此目的的方法。

因此,我已设法通过使用 tabNavigatorConifg 中的 tabBarComponent 使其工作,您可以停止根据索引进行导航的选项卡导航。

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

    )

完成此操作后,我在选项卡视图顶部模态显示视图的方法是将 tabnavigator 放在 stacknavigatior 中,然后只需导航到 stacknavigator 内的新屏幕即可。

TomTom
2017-05-20

react-navigation 的 bottomTabNavigator 有一个 tabBarOnPress 导航选项,您可以使用它来覆盖选项卡按下:

https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress

const AppContainer = createStackNavigator(
  {
    default: createBottomTabNavigator(
      {
        TAB_0: Stack0,
        TAB_1: Stack1,
        TAB_2: Stack2,
        TAB_3: View // plain rn-view, or any old unused screen
      },
      {
        defaultNavigationOptions: {
          // other tab navigation options...
          tabBarOnPress: ({ navigation, defaultHandler }) => {
            if (navigation.state.key === 'TAB_3') {
              navigation.navigate('tabToOpenAsModal');
            } else {
              defaultHandler();
            }
          }
        }
      }
    ),
    tabToOpenAsModal: {
      screen: TabToOpenAsModalScreen
    }
  },
  {
    mode: 'modal',
    headerMode: 'none'
  }
);

如果您将选项卡导航器嵌套在带有模态框的堆栈导航器中,则可以在按下选项卡栏按钮时打开它。由于打开的是模态框而不是选项卡,因此当模态框关闭时,应用将返回到按下模态选项卡之前可见的屏幕。

cjpete
2019-06-03