React Native:标签和堆栈导航集成

丹麦赛义德

我在“标签导航”和“堆栈”方面遇到了问题。

以下是堆栈和选项卡导航:

export function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor={COLORS.white}
      barStyle={{ backgroundColor: COLORS.mediumgrey }}
      inactiveColor={COLORS.grey}>
...
  <Tab.Screen
        name="More"
        component={MoreStack}
        options={{
          tabBarLabel: <Text style={styles.bottomNavBarTextSize}>More</Text>,
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="settings" color={color} size={26} />
          )
        }
        } />

组件“ MoreStack”是一个堆栈导航,如下所示:

function MoreStack() {
 return (
   <Stack.Navigator
     initialRouteName="More"
     screenOptions={{
       headerStyle: { backgroundColor: COLORS.mediumgrey },
       headerTintColor: COLORS.white,
       headerTitleStyle: styles.navBarTitleFont
     }}>
     <Stack.Screen name="More" component={MoreScreen} options={{ headerShown: false }} />
      ...
     <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
   </Stack.Navigator>
 );
}

在MoreScreen页面中,我具有以下注销代码:

  logOut = () => {
    firebase.auth().signOut().then(() => {
      this.props.navigation.replace('Login')
    });
  }

我的问题是它确实进入了登录页面,但底部的导航栏却没有消失。如果我想返回,那么它应该返回到它不应该的MoreScreen。从逻辑上讲,一旦注销,您将无法返回。

下图显示了该问题。请注意,底部导航栏如何仍然存在,如果单击了后退按钮,它将返回到上一个屏幕

****更新已修复:我通过将所有堆栈合并为1来修复它。如果要执行STACK1> MyTabs> STACK2,它将不起作用。通过执行STACK1> MyTabs> Stack1修复了此问题。

波拉苏美尔

以这种方式考虑,您将具有选项卡导航,堆栈导航和登录屏幕。导航的父母状态为“选项卡导航”>“堆栈导航”>“登录屏幕”。因此,当您在Stack Nav中的任何屏幕中时,都将看到选项卡。您需要做的是相反的。

将Tab Nav放入Stack导航器中,并将其命名为App Navigator。然后创建另一个Stack Nav,并将其命名为CredentialNavigator,然后将“登录/注册”屏幕放入其中。在主/根导航文件中,您可以根据登录状态动态呈现CredentialNavigator或AppNavigator。

isLogged ? false return <CredentialNavigator/> : return <AppNavigator>

这当然很简单,但是您绝对可以扩展此树。我建议您阅读几乎所有的React Navigation 5文档,这非常容易遵循并且非常有用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

与React Native的持续集成

来自分类Dev

React Native,导航

来自分类Dev

如何使用react-native将TabBarIOS弹出到导航堆栈的顶部?

来自分类Dev

react-native-导航器和工具栏

来自分类Dev

React Native-导航器和标签栏集成

来自分类Dev

React Native-使用反向处理程序时的堆栈导航

来自分类Dev

React Navigation 5从堆栈导航器隐藏标签栏

来自分类Dev

可触摸的不透明度在堆栈导航器屏幕中不响应-React Native

来自分类Dev

将props从react-redux传递到React Native底部标签导航

来自分类Dev

React创建堆栈导航器

来自分类Dev

React Native-如何在导航器中将函数传递到堆栈屏幕?

来自分类Dev

React-Native-标签导航器嵌套在抽屉内

来自分类Dev

如何在React Native中将React导航堆栈标头移动到屏幕底部?

来自分类Dev

尝试在react-native的底部标签导航中添加图像时遇到的问题

来自分类Dev

在React Native中如何在嵌套堆栈导航中的标题上添加按钮

来自分类Dev

React Navigator 5; 标签浏览器和堆栈浏览器

来自分类Dev

嵌套在堆栈导航器中的React Native选项卡导航器

来自分类Dev

在 react-native-router-flux 上从堆栈中弹出导航

来自分类Dev

React Native - 无法获取已通过导航器(从堆栈导航器到抽屉导航器)传递的参数。接收:对象未定义

来自分类Dev

如何在 React Native 中不使用堆栈导航器重定向到页面?

来自分类Dev

React Native - 标签和样式中的参数之间的区别

来自分类Dev

集成 React Native 和 Express JS Restful API

来自分类Dev

使用嵌套导航器与 react-navigation 和 redux 集成

来自分类Dev

无法在 react-native 中将堆栈导航器包装在 redux-provider 中

来自分类Dev

React Native Firebase Ref() 和导航复杂性

来自分类Dev

Android 和 React Native 顶部导航栏

来自分类Dev

使用 JSX 和 React Native 的动态标签名称

来自分类Dev

从堆栈移动到底部标签使 topBar 在 react-native-navigation 2 中消失

来自分类Dev

React Native Plaid 集成

Related 相关文章

  1. 1

    与React Native的持续集成

  2. 2

    React Native,导航

  3. 3

    如何使用react-native将TabBarIOS弹出到导航堆栈的顶部?

  4. 4

    react-native-导航器和工具栏

  5. 5

    React Native-导航器和标签栏集成

  6. 6

    React Native-使用反向处理程序时的堆栈导航

  7. 7

    React Navigation 5从堆栈导航器隐藏标签栏

  8. 8

    可触摸的不透明度在堆栈导航器屏幕中不响应-React Native

  9. 9

    将props从react-redux传递到React Native底部标签导航

  10. 10

    React创建堆栈导航器

  11. 11

    React Native-如何在导航器中将函数传递到堆栈屏幕?

  12. 12

    React-Native-标签导航器嵌套在抽屉内

  13. 13

    如何在React Native中将React导航堆栈标头移动到屏幕底部?

  14. 14

    尝试在react-native的底部标签导航中添加图像时遇到的问题

  15. 15

    在React Native中如何在嵌套堆栈导航中的标题上添加按钮

  16. 16

    React Navigator 5; 标签浏览器和堆栈浏览器

  17. 17

    嵌套在堆栈导航器中的React Native选项卡导航器

  18. 18

    在 react-native-router-flux 上从堆栈中弹出导航

  19. 19

    React Native - 无法获取已通过导航器(从堆栈导航器到抽屉导航器)传递的参数。接收:对象未定义

  20. 20

    如何在 React Native 中不使用堆栈导航器重定向到页面?

  21. 21

    React Native - 标签和样式中的参数之间的区别

  22. 22

    集成 React Native 和 Express JS Restful API

  23. 23

    使用嵌套导航器与 react-navigation 和 redux 集成

  24. 24

    无法在 react-native 中将堆栈导航器包装在 redux-provider 中

  25. 25

    React Native Firebase Ref() 和导航复杂性

  26. 26

    Android 和 React Native 顶部导航栏

  27. 27

    使用 JSX 和 React Native 的动态标签名称

  28. 28

    从堆栈移动到底部标签使 topBar 在 react-native-navigation 2 中消失

  29. 29

    React Native Plaid 集成

热门标签

归档