Question

我正在尝试使用react-native-navigation，对此有疑问。

我有一个包含很多项目的列表屏幕，当您单击其中的一个项目时，它将带您进入详细信息屏幕，并且该屏幕上需要3个底部标签。

通过本机导航实现此目标的最佳方法是什么。

我可以做这样的事情（参见代码）。但是然后，我在每个屏幕上都停留在3个底部标签上。

Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [{
        stack: {
          children: [{
            component: {
              name: 'SignIn',
              passProps: {
                text: 'ex tab'
              },
              options: {
                bottomTab: {
                  text: 'tab1',
                  icon: require('./images/one.png'),
                }
              }
            },
          }] // end children
        }  // end stack      
      },
      {
        component: {
          name: 'SignUp',
          passProps: {
            text: 'Sign up tab'
          },
          options: {
            bottomTab: {
              text: 'tab2',
              icon: require('./images/two.png'),
            }
          }
        },
      },
      {
        component: {
          name: 'SignUp',
          passProps: {
            text: 'Sign up tab'
          },
          options: {
            bottomTab: {
              text: 'tab2',
              icon: require('./images/two.png'),
            }
          }
        },


      }]

    } // end bottomtabs
  }
})

任何帮助或提示都将不胜感激。

Answer 1

React-Navigation的一种很好的做法是将Auth Stack放在Switch Navigator的一个分支中，然后将其余的应用程序放在Stack Navigator的Switch Navigator的另一个分支中。这样，如果您希望在身份验证堆栈上使用标签，从技术上讲，它是自己的堆栈，并且不会渗入应用程序的其余部分。例如：

app
-AuthSwitch
   \_Tab1
   \_Tab2
   \_Tabn
-MainSwitch
  \_HomeStack
  \_etc...

如何仅在一个屏幕上包含bottomTab

1 个答案: