React Native 中的嵌套导航

Question

这是我的代码。我想创建像 Swiper -> Auth -> Passcode -> App 这样的导航。正如您在这里看到的，我想要 AuthStack 中的 PassCode Switch Navigator，但我收到了此处的错误 Erro Image Links。

const AuthStack = createStackNavigator({ 
    SignIn: SignInScreen,
    OTP:OTPScreen,
    PassCodeNavigation : PassCodeStack 
// I want to put Switch Naviagtor here.
// Error is : "The Component for route 'PassCodeNavigation' must be a 
// React Component.

  },
    {
      initialRouteName:'SignIn'
    }
  );

const PassCodeStack = createSwitchNavigator(
  {
    PassCodeLoading: PassCodeLoadingScreen,
    PassCode: PassCodeScreen,
  },
  {
    initialRouteName:'PassCodeLoading'
  }
);

const MyAppNavigation = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
    Swiper:SwiperScreen
  },
  {
    initialRouteName: 'AuthLoading',
  }
)

我是 React-native 的新手。除了文档之外，我需要一个更好的关于 react-native 嵌套导航的文档。

Answer 1

您需要重新排序堆栈或路由的创建。

错误是 PassCodeStack 不能在初始化之前使用，因为它是未定义的，因此它说它必须是一个组件。

const PassCodeStack = createSwitchNavigator(
  {
    PassCodeLoading: PassCodeLoadingScreen,
    PassCode: PassCodeScreen,
  },
  {
    initialRouteName:'PassCodeLoading'
  }
);

const AuthStack = createStackNavigator({ 
    SignIn: SignInScreen,
    OTP:OTPScreen,
    PassCodeNavigation : PassCodeStack 
// I want to put Switch Naviagtor here.
// Error is : "The Component for route 'PassCodeNavigation' must be a 
// React Component.

  },
    {
      initialRouteName:'SignIn'
    }
  );


const MyAppNavigation = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
    Swiper:SwiperScreen
  },
  {
    initialRouteName: 'AuthLoading',
  }
)

React Native 中的嵌套导航

Nested Navigation in React Native

reactjs

react-native

react-native-android

mobile-application