Блог

Главная - Вопросы по программированию - Как добавить экран входа в систему перед начальным экраном в React Native

Как добавить экран входа в систему перед начальным экраном в React Native

#reactjs #react-native #authentication #navigation #stack-navigator

#reactjs #react-native #аутентификация #навигация #стек-навигатор

Вопрос:

В настоящее время мой код застрял в верхней части главного экрана. Тем не менее, я хотел бы позволить вам перейти на главный экран, когда я нажимаю кнопку входа в систему на экране входа в систему. Я надеюсь, что здесь нет навигации по верхним или нижним вкладкам на экране входа в систему.

Текущий рабочий стол

Ниже приведен мой код. Вход в систему — это импорт частей экрана.

Пожалуйста, помогите мне.

app.js

 export default function App() {
  
  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === 'Home') {
                iconName = focused ? 'ios-home' : 'ios-home-outline';
              } else if (route.name === 'Purchase') {
                iconName = focused ? 'ios-list-circle' : 'ios-list';
              } else if (route.name === 'Wish List') {
                iconName = focused ? 'ios-star' : 'ios-star-outline'
              }

              // You can return any component that you like here!
              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: '#32cd32',
            inactiveTintColor: 'gray',
            
          }}
        >
          <Tab.Screen name="Home" component={HomeStackScreen} />
          <Tab.Screen name="Wish List" component={WishListStackScreen} />
          <Tab.Screen name="Purchase" component={PurchaseStackScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>

  );
};

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

1. См . reactnavigation.org/docs/auth-flow /. …. Вместо вложенного компонента входа в систему условно добавьте Login в Stack.Navigator

2. @Hariks Когда я ссылаюсь на документы, там говорится, что если я хочу использовать навигацию по нажатию и навигацию по нижней вкладке вместе, создайте контейнер с навигацией по нажатию, а затем вставьте экран стека со значением компонента. Итак, я создал код с такой структурой. Что мне здесь делать?

Ответ №1:

Я считаю, что сначала вам следует создать навигатор стека в app.js с экраном входа в систему и домашней страницей в стеке:

 <NavigationContainer>
      <Stack.Navigator>
           <Stack.Screen name="Login" component={Login} />
           <Stack.Screen name="Home" component={Home} />
       </Stack.Navigator>
</NavigationContainer>

Когда вы нажимаете кнопку на экране входа в систему, вы должны сделать это, когда пользователь аутентифицируется:

 <Button onPress={() => {navigation.navigate('Home')}}

Затем на главной странице вы должны добавить tabnavigator

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

1. Если вы посмотрите на мой код, я использую экран стека и экран вкладок вместе. Я вставил экран стека в качестве компонента экрана вкладок. Мне нужен экран входа в систему без экрана вкладок и экрана стека.

2. Я знаю об этом, но если вы не хотите, чтобы на странице входа в систему был навигатор вкладок, сначала вам следует создать навигатор стека, как я показал вам выше (чтобы перейти к экрану входа в систему), затем нажмите кнопку перейти на главную страницу и добавьте tabnavigator на свою домашнюю страницу

3. Большое вам спасибо за ваш ответ. Однако, если я добавлю код, который вы мне указали, появится сообщение об ошибке, что навигатор вкладок и навигатор стека нельзя использовать вместе.

4. вы не можете использовать together действительно, вот почему вам нужен навигатор стека в app.js файл и навигатор вкладок на вашей домашней странице

5. Я решил это! Я изменил структуру, как вы сказали.

Метки: