Вложенная навигация в React Native - PullRequest
Новая
       42

Вложенная навигация в React Native

2 голосов
/ 28 июня 2019

Вот мой код.Я хочу создать навигацию как Swiper -> Auth -> Passcode -> App.Как вы можете видеть здесь, я хочу использовать PassCode Switch Navigator внутри AuthStack, но я получаю сообщение об ошибке, как здесь 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.Мне нужна лучшая документация по вложенной навигации, кроме документации.

1 Ответ

1 голос
/ 28 июня 2019

Вам необходимо изменить порядок создания стеков или маршрутов.

Ошибка: 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',
  }
)
...