Блог

Главная - Вопросы по программированию - Экран навигации React пропущен во время рендеринга с использованием инструкции `if`, но работает с использованием вложенных троичных файлов

Экран навигации React пропущен во время рендеринга с использованием инструкции `if`, но работает с использованием вложенных троичных файлов

#react-native #react-navigation-v5

#react-native #react-navigation-v5

Вопрос:

Проблема: я пытаюсь условно отображать экраны в навигаторе, но он пропускает первый экран (GDPR) и переходит непосредственно к главному экрану приложения, даже если условия выполнены.

код здесь:

 if (!!firstLogin amp;amp; !acceptedPrivacyPolicy) {
    console.log('rendering....', !!firstLogin, !acceptedPrivacyPolicy)
    return (
      <FirstLoginStack.Navigator 
      headerMode={'none'} 
      screenOptions={{
        cardStyleInterpolator: 
        CardStyleInterpolators.forHorizontalIOS
      }}>
        <FirstLoginStack.Screen name={'GDPR'} component={GDPR} />
        <FirstLoginStack.Screen name={'AppTabs'} component={AppTabs} />
      
    </FirstLoginStack.Navigator>
    )
  }

Однако, когда я использую вложенный троичный файл, он работает нормально:

 return ( 
    <AppMainStack.Navigator 
      headerMode={'none'} 
      screenOptions={{
        cardStyleInterpolator: 
        CardStyleInterpolators.forHorizontalIOS
    }}>
      {firstLogin ?
      <>
        {!acceptedPrivacyPolicy ? <AppMainStack.Screen name={'GDPR'} component={GDPR} /> : null}
        <AppMainStack.Screen name={'AppTabs'} component={AppTabs} />
      </>
      : <AppMainStack.Screen name={'AppTabs'} component={AppTabs} />
    }
    </AppMainStack.Navigator>
  )

Why is this the case?

Ответ №1:

Мы можем определять разные экраны на основе некоторого условия. Например, если пользователь вошел в систему, мы можем определить Home, Profile, Настройки и т. Д. Если пользователь не вошел в систему, мы можем определить экраны входа и регистрации.

Например:

 isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
)

Это уже определенный рабочий процесс для аутентификации навигации React

Комментарии:

1. Спасибо. да, это то, что я сделал во второй части. но мой вопрос в том, почему первый не работает

2. Поскольку для рендеринга требуется stack navigator, если ваше условие становится ложным, он никогда не будет отображать дочерние элементы, определенные в нем, так что это вообще не сработает

3. да, но условия верны в обоих случаях

4. Он не будет учитывать только if . Это else также необходимо, потому что, когда он получает только условие if, тогда он будет ожидать, что else также будет отображаться

5. ценю помощь. Это неправда. «Вы должны отметить, что вам не нужно включать else и второй блок фигурных скобок». developer.mozilla.org/en-US/docs/Learn/JavaScript /…

Метки: ,