Блог

Главная - Вопросы по программированию - Как создать отдельный навигационный ящик для разных пользователей: React navigation v5

Как создать отдельный навигационный ящик для разных пользователей: React navigation v5

#react-native #redux #react-native-firebase

#react-native #упрощение #react-native-firebase

Вопрос:

AdminDrawer => Учетная запись, панель мониторинга, выход

Пользовательский интерфейс => Профиль, контакт, вход

  1. когда пользователь успешно войдет в систему из firebase, он покажет «Ящик администратора»
  2. когда вы не входите в систему из firebase, будет отображаться «Пользовательский ящик», например, «ящик foodpanda»

Ответ №1:

Я думаю, что это один и тот же ящик, но мы обнаружим переменную, проверяющую вход пользователя

 const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        {isSignedIn ? (
          <>
            <Drawer.Screen name="Account" component={Account} />
            <Drawer.Screen name="Dashboard" component={Dashboard} />
            <Drawer.Screen name="logout" component={logout} />
          </>
        ) : (
          <>
            <Drawer.Screen name="Profile" component={SignInScreen} />
            <Drawer.Screen name="Contact" component={SignUpScreen} />
            <Drawer.Screen name="Login" component={Login} />
          </>
        )}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

с isSignedIn пропуск передается с помощью redux или контекста. Это зависит от вас

Два документа, полезные для вас

https://reactnavigation.org/docs/drawer-based-navigation/

https://reactnavigation.org/docs/auth-flow/

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

1. как я могу подключить его к firebase и как входящий в систему реквизит обрабатывается redux, можете ли вы предоставить некоторые дополнительные подробности. Ань Девит

2. Это пример аутентификации с помощью firebase rnfirebase.io/auth/usage Нравится мой ответ reactnavigation.org/docs/auth-flow вы можете следовать этому, чтобы понять, а затем попробовать с помощью redux

3. Я хочу изменить элементы ящика, не отображаемые в том же ящике, как показано ниже <DrawerItem label=»Экран панели» LabelStyle={{marginLeft:-18}} onPress={()=>props.navigation.navigate(‘Экран панели’)} icon ={()=><Имя пера = ‘compass’ size = {16} color = ‘# F60875’ style ={{Левый край: 5}}/>} />

4. У меня есть много файлов, которыми я не могу поделиться здесь, я хочу ящик, подобный «food panda», если у вас есть какой-либо пример или ссылка, чтобы я мог это понять

5. Вы просматривали 2 ссылки выше?