Блог

У меня есть следующий навигатор стека в App.js:

 return (
    <NavigationContainer>
      <Stack.Navigator  initialRouteName="Login" screenOptions={{headerShown:false}}>
        {user ? (
          <>
            <Stack.Screen name="Home">
              {(props) => <HomeScreen {...props} extraData={user} />}
            </Stack.Screen>
            <Stack.Screen name="Profile" component={ProfileScreen} />
            <Stack.Screen name="Login" component={LoginScreen} />
            
          </>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
  

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

Способ сделать это — создать компонент навигатора вкладок, в котором Home и Profile представлены 2 экрана навигатора:

 const Tab = createBottomTabNavigator();

function TabNavigator({route}) {
  // Retrieve user from initalParams.
  // The user is passed to initialParams in the snippet below.
  const user = route.params?.user
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}
  

Тогда навигатор вкладок может быть экраном вашего stack navigator:

 return (
  <NavigationContainer>
    <Stack.Navigator
      initialRouteName="Login"
      screenOptions={{headerShown: false}}>
      {user ? (
        <>
          <Stack.Screen name="Tabs" component={TabNavigator} initialParams={{user: user}}/>
        </>
      ) : (
        <>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Registration" component={RegistrationScreen} />
        </>
      )}
    </Stack.Navigator>
  </NavigationContainer>
);
  

Если вам нужен доступ к user изнутри HomeScreen , вы можете передать его с помощью down, используя initialParams тот же способ, которым он был передан TabNavigator . Если вы не хотите продолжать передавать подобные вещи, вы можете попробовать Context api.

Я удалил Login экран в приведенном выше примере, потому что предположил, что это ошибка, поскольку у вас уже есть Login экран, определенный для случаев, когда у вас нет аутентифицированного пользователя.