Question

我在 React Navigation 中使用 useNavigation。使用AsyncStorage登录后，我想重定向到首页，但无法返回到App功能。当我想转到主页时，导航找不到并返回错误。

如何触发名为 app 的函数？

导航错误（控制台）

<块引用>

有效载荷为 {"name":"HomeScreen"} 的操作“NAVIGATE”不是由任何导航员处理

登录代码

await AsyncStorage.setItem("userData", JSON.stringify(data.data));
navigation.navigate('HomeScreen');

App.js

const App = () => {
  const [signedIn, setSignedIn] = useState([]);

  useEffect(() => {
    _checkUser();
  }, []);

  async function _checkUser(){
    let responseUser = await AsyncStorage.getItem("userData");
    setSignedIn(responseUser);
  }

  if(signedIn != null) {
    return (
      <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="HomeScreen" component={_homeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    )
  } else {
    return (
      <NavigationContainer>
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
          <Stack.Screen name="RegisterScreen" component={_registerScreen} />
          <Stack.Screen name="LoginScreen" component={_loginScreen} />
          <Stack.Screen name="ForgotScreen" component={_forgotScreen} />
          <Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

当我尝试用 MOBX 做这件事时..

let signedIn = userStore.isLogin;

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        {
          signedIn ? (
            <Stack.Screen name="HomeScreen" component={_homeScreen} />
          ) : (
            <>
              <Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
              <Stack.Screen name="RegisterScreen" component={_registerScreen} />
              <Stack.Screen name="LoginScreen" component={_loginScreen} />
              <Stack.Screen name="ForgotScreen" component={_forgotScreen} />
              <Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
            </>
          )
        }
      </Stack.Navigator>
    </NavigationContainer>
  )

路由器

let data = await axios.post(baseURL+"users_checkMail", sendData);
uaStore.userStore.userData = data.data;
uaStore.userStore.isLogin = true;
await AsyncStorage.setItem("userData", JSON.stringify(data.data));
console.log(userStore.isLogin); // LOG: TRUE
setLoader(false);
navigation.navigate('HomeScreen');

Answer 1

如果您使用 mobx 进行状态管理，请在您的 mobx 状态树中创建和管理 signedIn 状态。当用户登录时，您只需将signedIn 状态设置为true。当用户注销时，将signedIn 设置为false。无需使用导航道具。当你改变你的 signedIn 状态时，react-navigation 组件将重新渲染。

Answer 2

如果您想在成功登录后触发 App.js ... 那么您需要用 React.Context

包装您的 NavigationContainer

您的 signedIn 用户是 object 我认为...不是数组因此，通过 [] 将其初始化为 state ... if(signedIn != null) 永远不会评估为 true ++ 确保在从 JSON.parse 获取对象后AsyncStorage ...

 const AuthContext = React.createContext({
    signedIn,
    _checkUser: () => {},
  });
  
  export const useAuth = () => React.useContext(AuthContext);

  const defaultValue = {
    signedIn,
    _checkUser,
  };

  return (
    <AuthContext.Provider value={defaultValue}>
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          {signedIn ? (
            <Stack.Screen name="HomeScreen" component={_homeScreen} />
          ) : (
            <>
              <Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
              <Stack.Screen name="RegisterScreen" component={_registerScreen} />
              <Stack.Screen name="LoginScreen" component={_loginScreen} />
              <Stack.Screen name="ForgotScreen" component={_forgotScreen} />
              <Stack.Screen
                name="EmailCodeScreen"
                component={_emailCodeScreen}
              />
            </>
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );

在登录屏幕

// Then you refresh you auth user in LoginScreen like
  const { _checkUser } = useAuth();
  _checkUser();

Answer 3

你可以试试这个

return (
    <NavigationContainer>
      {signedIn != null ? (
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="HomeScreen" component={_homeScreen} />
        </Stack.Navigator>
      ) : (
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
          <Stack.Screen name="RegisterScreen" component={_registerScreen} />
          <Stack.Screen name="LoginScreen" component={_loginScreen} />
          <Stack.Screen name="ForgotScreen" component={_forgotScreen} />
          <Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );

Answer 4

首先，您不能两次使用 NavigationContainer ..我建议制作两个这样的 Navigator，一个 Login 和另一个这样的 AppStack！我只会使用 redux 和 redux persist 和异步存储，让生活更轻松

const App = () => {
  useEffect(() => {
    setTimeout(() => {
      RNBootSplash.hide({fade: true});
    }, 1000);
  }, []);

const LoginStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        component={Login}
        options={{
          headerTransparent: true,

          cardStyle: {backgroundColor: colors.BACKGROUND},
          ...TransitionPresets.ModalSlideFromBottomIOS,
          headerTitleStyle: {color: 'transparent'},
        }}
      />
      <Stack.Screen
        name="Terms"
        component={Terms}
        options={{
          headerTransparent: true,

          cardStyle: {backgroundColor: colors.BACKGROUND},
          ...TransitionPresets.ModalPresentationIOS,
          headerTitleStyle: {color: 'transparent'},
        }}
      />
    </Stack.Navigator>
  );
};

const AppStack = () => {
  return (
    <Stack.Navigator>
      {screens.map((screen, i) => (
        <Stack.Screen
          name={screen.name}
          component={screen.screenname}
          key={i}
          options={{
            headerTransparent: true,

            cardStyle: {backgroundColor: colors.BACKGROUND},
            ...TransitionPresets.ModalSlideFromBottomIOS,
            headerTitleStyle: {color: 'transparent'},
          }}
        />
      ))}
    </Stack.Navigator>
  );
};
    
  const AppState = () => {
    const checkLoggedIn = useSelector((state) => state.AuthReducer.loggedIn);
    return <>{checkLoggedIn === false ? <LoginStack /> : <AppStack />}</>;
  };
  return (
    <Provider store={store}>
      <NavigationContainer>
        <AppState />
      </NavigationContainer>
    </Provider>
  );
};

store.js

import {applyMiddleware, createStore} from 'redux';
import thunk from 'redux-thunk';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {persistStore, persistReducer} from 'redux-persist';

import rootReducer from './index';

// Middleware: Redux Persist Config
const persistConfig = {
  // Root
  key: 'root',
  // Storage Method (React Native)
  storage: AsyncStorage,
  // Whitelist (Save Specific Reducers)
  whitelist: ['StickerReducer', 'AuthReducer'],
  // Blacklist (Don't Save Specific Reducers)
  blacklist: [''],
};
// Middleware: Redux Persist Persisted Reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

const middleware = [thunk];

const store = createStore(persistedReducer, applyMiddleware(...middleware));

// Middleware: Redux Persist Persister
let persistor = persistStore(store);
// Exports
export {store, persistor};

认证减速器

import {ADD_DEVICE_TOEKN, LOGGED_IN} from './types';

const initialState = {
  loggedIn: false,
  user_Id: '',
  device_token: '',
};

export default AuthReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGGED_IN:
      const paylodLoggedIn = action.payload;
      return {
        ...state,
        loggedIn: paylodLoggedIn.loggedIn,
        user_Id: paylodLoggedIn.loggedIn,
      };
    case ADD_DEVICE_TOEKN:
      const paylodToken = action.payload;
      return {
        ...state,
        device_token: paylodToken,
      };
    default:
      return state;
  }
};

import {combineReducers} from 'redux';
import AuthReducer from './AuthReducer';
import StickerReducer from './StickerReducer';

export default combineReducers({
  AuthReducer: AuthReducer,
  StickerReducer: StickerReducer,
});

Authaction.js

import {LOGGED_IN} from '../types';

export const LoginAction = (userData) => {
  return (dispatch) => {
    dispatch({
      type: LOGGED_IN,
      payload: userData,
    });
  };
};

终于登录dispacther

import {useDispatch} from 'react-redux';
import {LoginAction} from '../../../redux/actions/LoginAction';
const Login = ({navigation}) => {
  const dispatch = useDispatch();
 return (
<Pressable onPress={() =>dispatch(LoginAction(data))}>
  </Pressable>
    );
    };

Answer 5

来自文档：

<块引用>

请务必注意，使用此类设置时，您无需通过调用 Home 或任何其他方法手动导航到 navigation.navigate('Home') 屏幕。 React Navigation 将在 isSigned 发生变化时自动导航到正确的屏幕 - Home 变为 isSignedIn 时的 true 屏幕，以及 {{1} SignIn 变为 isSignedIn 时的 } 屏幕。如果您尝试手动导航，则会收到错误消息。

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

所以只需删除该行：

false

并将其替换为：

navigation.navigate('HomeScreen');

如果你使用 MobX，或者是 MobX 等效项。

登录导航问题后反应导航

5 个答案: