15

使用 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?
  },
});
4

6 回答 6

24

实际上，react-navigation不支持将动态呈现方式从 to 更改default为（请参阅此处modal的讨论）。我遇到了同样的问题，并通过使用带有set to和set to的非常顶部来解决它：StackNavigatorheaderModenonemodemodal

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');
于 2017-03-20T15:39:48.390 回答
10

不确定这是否仍然与您相关，但我已经设法实现这一目标。

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

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

    )

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

于 2017-05-20T10:48:33.887 回答
4

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

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

于 2019-06-03T09:47:41.503 回答
1

使标签栏消失的一种方法是使用以下命令隐藏 tabBar visible: false：

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

但是，这似乎不会触发任何到全屏的转换，我猜这是需要的吗？

另一种选择是包装PhotoPickerScreen在一个新的 StackNavigator 中并将该导航器设置为 mode='modal'。

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

请注意，我正在努力思考如何最好地自己构建导航，所以……

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

有兴趣听听你的想法！

于 2017-02-25T10:38:16.530 回答
0

我建议两种解决方案

第一个是关于隐藏它

对于第二个，请阅读：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}
/>
于 2021-01-25T00:01:59.277 回答
-1

文档在某些方面不完整，但这里是：

    export default class HomeScene extends Component {

        static navigationOptions = {
        title: 'foo',
        header:{
                    visible: true
                }
        }
        ....
      }
于 2017-03-25T10:26:28.003 回答