Навигатор стека React Navigator 5 и навигатор по ящикам вместе

В основном я из реакции-навигации v4, мне знакомо то же самое с SwitchNavigator в качестве моста, но v5 не поддерживает SwitchNavigator, поэтому немного изо всех сил пытается понять приведенную ниже реализацию.

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function AuthenticationStack({ navigation }) {
    return (
        <Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false}}>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Registration" component={Registration} />
        </Stack.Navigator>
    );
}

function UserStack({ navigation }) {
    return (
        <Stack.Navigator initialRouteName="Jobs" screenOptions={{headerShown: false}}>
            <Stack.Screen name="Jobs" component={Profile} />
            <Stack.Screen name="JobDetails" component={JobDetails} />
        </Stack.Navigator>
    );
}

function App() {
    return (
        <NavigationContainer>
            <Drawer.Navigator drawerContent={props => <SideBar { ...props } />}>
                <Drawer.Screen name="Home" component={AuthenticationStack} />
                <Drawer.Screen name="Jobs" component={UserStack} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default App;

Приведенный выше код работает, но есть некоторые проблемы, например,

  1. При загрузке приложения изначально ящик виден и скрывается при загрузке приложения.
  2. Я не хочу, чтобы у меня были ящики для экранов аутентификации. Если у меня есть 2 разных режима навигации без разделения AuthenticationStack и UserStack, тогда у меня возникнут проблемы при переходе из входа в профиль и наоборот

ОБНОВЛЕНИЕ 1

export default() => {
    const [logged, setUser] = React.useState(false);
    return (
        <NavigationContainer>
            {
                logged
                ?
                <DrawerScreen initialParams={{ setUser }} />
                :
                <AuthStackScreen initialParams={{ setUser }} />
            }
        </NavigationContainer>  
    );
}

Теперь в login.js мне нужно обновить setUser до true, верно? Если да, то как я могу получить доступ к setUser в моем файле login.js

Обновление 2

class Login extends Component {
    fetch(login_url, {
            method: "POST",
            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Accept-Language': 'en-US' },
            body: JSON.stringify(data)
        })
        .then((response) => {
            const success = response.ok;
            const data = response.json();
            return Promise.all([success, data]);
        })
        .then(([success, response]) => {
            var data, userInfo;
            if (success) {
                data = {
                    token: response.token,
                    user: response.user,
                }
    
                if(_storeUserData(response)) {
                    _retrieveUserData().then((userInfo) => {
    
                        this.setState({
                            logged: true,
                            userInfo: userInfo,
                            loading:false,
                            email: '',
                            password: ''
                        });
                        navigate('Profile');
                    })
                    .catch((error) => {
                        // alert(error);
                    });
                }
            }
            this.setState(state_data);
        })
        .catch((error) => {
            alert('Error:'+error);
            this.setState({ loading: false});
        });
}

comment
Вам следует взглянуть на reactnavigation.org/docs/auth-flow и реализовать что-то подобное, чтобы иметь только один навигатор за раз   -  person Guruparan Giritharan    schedule 07.08.2020
comment
@GuruparanGiritharan, но AuthenticationStack не должен быть навигатором по ящикам. Как я могу иметь и то и другое вместе?   -  person overflow    schedule 07.08.2020
comment
Логика была бы какая-то ConditionForLogin? ‹AuthStack›: ‹DrawerStack›   -  person Guruparan Giritharan    schedule 07.08.2020
comment
@GuruparanGiritharan, могу я ответить на простой пример?   -  person overflow    schedule 07.08.2020
comment
ты пробовал ответить?   -  person Guruparan Giritharan    schedule 08.08.2020


Ответы (1)


Вы можете создать что-то похожее на навигатор переключателей, условно отрисовав навигаторы, как показано ниже.

export default function App() {
  const [loggedIn, setLoggedIn] = React.useState(false);
  return (
    <NavigationContainer>
      {loggedIn ? (
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen} initialParams={{ setLoggedIn }}/>
          <Drawer.Screen name="Notifications" component={NotificationsScreen} />
        </Drawer.Navigator>
      ) : (
        <Stack.Navigator>
          <Stack.Screen
            name="Auth"
            component={AuthScreen}
            initialParams={{ setLoggedIn }}
          />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
}

Вы можете попробовать эту закуску в качестве рабочего примера https://snack.expo.io/@guruparan/switchsample

person Guruparan Giritharan    schedule 07.08.2020
comment
Собственно сейчас пробую .. Сделал согласно твоему ответу. Удалось узнать, как обновить loggedIn до true на экране входа в систему - person overflow; 14.08.2020
comment
Я обновил вопрос. проверьте мой блок обновления 2 - person overflow; 15.08.2020
comment
Вы проверили мою закуску? Вы можете передать функцию setState в качестве параметра и сделать это - person Guruparan Giritharan; 15.08.2020
comment
Вы имеете в виду initialParams? - person overflow; 15.08.2020
comment
да, вы можете передать его как параметры и вызвать его или использовать что-то вроде контекста реакции и обновить значение из дочернего представления - person Guruparan Giritharan; 15.08.2020
comment
Да я пробовал. Я написал компонент на основе классов и для проверки написал this.props.route.setUser(true); внутри componentDidMount(), где говорится, что this.props.route.setUser не является функцией - person overflow; 15.08.2020
comment
попробуйте this.props.route.params.setUser - person Guruparan Giritharan; 15.08.2020