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中没有任何支持可以动态更改default到modal的呈现方式（请参阅有关此here的讨论）。我遇到了同样的问题并通过使用设置为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' });解决了问题：

Tab1Screen

这允许我在Tab2Screen和this.props.navigation.navigate('LoginScreenStackNavigator');中执行以下操作（使用redux），以便从我想要的任何地方调出模态视图：

apt-get

Answer 2

不确定这是否仍然与您相关，但我已设法找到了实现此目的。

所以我设法通过tabNavigatorConifg中的tabBarComponent使其工作，你可以根据索引停止导航导航。

The area of `Rectangle` is 100
The area of `Triangle` is 50

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

Answer 3

使标签栏消失的一种方法是使用visible: false隐藏标签栏：

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen,
    navigationOptions: {
      tabBar: {
        visible: false,
      },
    },
  },
});

然而，这似乎没有触发任何向全屏的转换，我想这是期望的？

另一种选择可能是将PhotoPickerScreen包装在新的StackNavigator中，并将该导航器设置为mode =＆＃39; modal＆＃39;。

您可能必须以某种方式从tabItem上的onPress触发导航到该模式（例如。navigation.navigate('TakePhoto')。）

请注意，我试图自己解决如何最好地构建导航的问题，所以...

第三个选项，将StackNavigator实现为父级，然后添加MyApp TabNavigator作为其中的第一个路径，可能是最灵活的解决方案。然后TakePhoto屏幕与TabNavigator处于同一级别，允许您从任何地方路由到它。

有兴趣听听你的想法！

Answer 4

react-navigation的bottomTabNavigator具有tabBarOnPress导航选项，可用于替代按Tab键：

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'
  }
);

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

Answer 5

我建议两种解决方案

第一个是关于隐藏它

第二个请阅读：https://reactnavigation.org/docs/hiding-tabbar-in-screens

<Tab.Screen
name={Routes.CREATE_ANNOUNCEMENT_SCREEN}
// name={Routes.TEST_SCREEN}
options={{
.
.
.
  tabBarVisible: false,    <----- solution 1
  tabBarButton: (props) => (   <----- or solution 2
    <TouchableOpacity
      {...props}
      onPress={() => {
        navigation.navigate(Routes.DETAILS_SCREEN);
      }}
    />
  ),
}}
component={CreateAnnouncementScreen}
/>

Answer 6

某些领域的文档不完整，但现在是：

    export default class HomeScene extends Component {

        static navigationOptions = {
        title: 'foo',
        header:{
                    visible: true
                }
        }
        ....
      }

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

6 个答案: