如何在一个屏幕上仅包含底部选项卡

Question

我正在尝试使用反应原生导航并对此有疑问。

我有一个包含很多项目的列表屏幕，当您单击其中一个时，它会将您带到详细信息屏幕，我需要该屏幕上的 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 将身份验证堆栈放在开关导航器的一个分支中，然后将应用程序的其余部分放在堆栈导航器中开关导航器的另一个分支中，这是一种非常好的做法。这样，如果您希望在身份验证堆栈上使用选项卡，那么从技术上讲，它是自己的堆栈，并且不会渗入应用程序的其余部分。例如：

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