react-native - 如何使用 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

react-navigation的底部TabNavigator 有一个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'
  }
);

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