根據身份驗證更改反應導航抽屜堆疊。反應原生

我正在開發一個不需要用戶注冊的應用程式。這意味著用戶即使沒有注冊也可以訪問應用內容。我有一個抽屜導航器，如下圖所示：

堆疊導航器的代碼：

function AppStack(props) {
  const { state } = useContext(AuthContext);
  return (
    <><Drawer.Navigator
      style={{ flex: 1 }}
      drawerContent={props => <CustomDrawerContent {...props} />}
      drawerStyle={{
        backgroundColor: nowTheme.COLORS.PRIMARY,
        width: width * 0.65,

      }}
      drawerContentOptions={{
        activeTintcolor: nowTheme.COLORS.WHITE,
        inactiveTintColor: nowTheme.COLORS.WHITE,
        activeBackgroundColor: "transparent",
        itemStyle: {
          width: width * 0.75 ,
          backgroundColor: "transparent",
          paddingVertical: 16,
          paddingHorizonal: 12,
          justifyContent: "center",
          alignContent: "center",
          alignItems: "center",
          overflow: "hidden"
        },
        labelStyle: {
          fontSize: 18,
          marginLeft: 12,
          fontWeight: "normal"
        }
      }}
      initialRouteName="Home"
    >
      
      <Drawer.Screen name={t('Home')} component={HomeStack} />
      <Drawer.Screen name={t('News')} component={ArticlesStack} />
      <Drawer.Screen name={t('Profile')} component={ProfileStack} />
       <Drawer.Screen name={t('Register')} component={Register}/>
      <Drawer.Screen name={t('Settings')} component={SettingsStack} />
      
      <Drawer.Screen name={t('Start Evaluation')} component={EvaluationsStack} />
    </Drawer.Navigator>

    </>
  );
}

我想要實作的是，僅在用戶未注冊時才顯示注冊，并在用戶注冊時顯示注銷。有什么想法嗎？

這是我的身份驗證背景關系代碼：

import createDataContext from "./createDataContext";
import authApi from "../../api/authApi";
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as RootNavigation from '../../auth/navigationRef';



const authReducer = (state, action) => {
  switch (action.type) {
    case 'add_error':
      return {...state, errorMessage: action.payload };
    case 'signup' :
      return  {errorMessage: '', token: action.payload };
    case "signin":
      return { errorMessage: "", token: action.payload };
    case 'clear_error_message':
      return {...state, errorMessage: ''};
    case 'signout': 
      return {token: null, errorMessage: ''}
    default:
      return state;
  }
};

const tryLocalSignin = dispatch => async () => {
  const token = await AsyncStorage.getItem('token');
  if (token) {
    dispatch({ type: 'signin', payload: token  });
    RootNavigation.navigate('App');
  } else {
    RootNavigation.navigate('Register');
  }
}

const clearErrorMessage = dispatch => () => {
  dispatch({type: 'clear_error_message'});
}

const signup = dispatch => async ({email, password, name}) => {
    try {
      const response = await authApi.post('/signup', {email, password, name});
      await AsyncStorage.setItem('token', response.data.token);
      dispatch({ type: 'signup', payload: response.data.token});

      RootNavigation.navigate('Onboarding');
    } catch (error) {
      console.log(error)
      dispatch({type: 'add_error', payload: 'Something went wrong with sign up'})
    }
  };


const signin = dispatch => async ({email, password}) => {
  try {
     const response = await authApi.post('/signin', {email, password});
     await AsyncStorage.setItem('token', response.data.token);
     dispatch({type: 'signin', payload: response.data.token});
     RootNavigation.navigate('App');
  } catch (error) {
    console.log(error)
    dispatch({
      type: 'add_error',
      payload: 'Something went wrong with sign in'
    })
  }
};

const signout = dispatch => async () => {
  await AsyncStorage.removeItem('token');
  dispatch({type: 'signout'});
  RootNavigation.navigate('Auth');
}

export const {Provider , Context} = createDataContext(
  authReducer,
  {signin, signup, signout, clearErrorMessage, tryLocalSignin, addQuest},
  {token: false, errorMessage: ''}

)

uj5u.com熱心網友回復：

檢查您的令牌（或用戶資料）。然后使用選擇器訪問值（或您用來訪問資料的任何方法）并使用條件渲染：

const isLoggedIn = ...your logic to detect logged in status ...

{isLoggedIn 
  ? <Drawer.Screen name={t('Register')} component={Register}/> : 
  : <Drawer.Screen name={t('Logout')} component={Logout}/> }

uj5u.com熱心網友回復：

您可以使用 react-navigation v6 中引入的 Group，您可以在導航之上創建自定義背景關系并根據背景關系值做出決定。

檔案鏈接：https : //reactnavigation.org/docs/group/

例如

 const { isLoggedIn } = useContext(LogicContext); // any logic here

 return(
   <Drawer.Group>
       { isLoggedIn ? <Drawer.Screen name="LoggedInDrawer" component={LoggedInDrawer} /> :  <Drawer.Screen name="LoggedOutDrawer" component={LoggedOutDrawer} />
   </Drawer.Group>
 )

uj5u.com熱心網友回復：

它看起來在你的專案中使用 redux 包。只需在抽屜組件中使用 redux 的 useSelector 即可獲取注冊狀態。

標籤：

上一篇：有些東西不作業，我的反應本機應用程式不作業

下一篇：元素隱式具有“任何”型別，因為“字串”型別的運算式不能用于在ReactTypescript中索引型別