Question

我试图用抽屉式导航器包装标签式导航器。我首先开始使用所需的reduces，state等开发AUTH屏幕。现在，我想实现抽屉式导航器，但是我无法设法解决。

我的AuthContext.js

import createDataContext from './createDataContext'
import trackerApi from '../api/tracker'

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'sign_in':
      return { isLoading: false, errorMessage: '', token: action.payload }
    case 'add_error':
      return { ...state, errorMessage: action.payload }
    case 'clear_error_message': 
      return { ...state, errorMessage: '' }
    case 'no_token': 
      return { ...state, isLoading: false }
    case 'sign_out': 
      return { token: null }
    default:
      return state
  }
}

const tryLocalSignIn = (dispatch) => async () => {
  const token = await AsyncStorage.getItem('token')
  if(token) {
    dispatch({ type: 'sign_in', payload: token })
  } else {
    dispatch({ type: 'no_token' })
  }
}

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

const signUp = (dispatch) => async ({ email, password }) => {
  try {
    const { data } = await trackerApi.post('/signup', { email, password })
    await AsyncStorage.setItem('token', data.token)
    
    dispatch({ type: 'sign_in', payload: data.token })
  } catch (error) {
    dispatch({ type: 'add_error', payload: 'Something went wrong with sign up' })
  }
}

const signIn = (dispatch) => async ({ email, password }) => {
  try {
    const { data } = await trackerApi.post('/signin', { email, password })
    await AsyncStorage.setItem('token', data.token)
    
    dispatch({ type: 'sign_in', payload: data.token })
  } catch (error) {
    dispatch({ type: 'add_error', payload: 'Something went wrong with sign in' })
  }
}

const signOut = (dispatch) => async () => {
  await AsyncStorage.removeItem('token')
  dispatch({ type: 'sign_out' })
}

export const { Provider, Context } = createDataContext(
  authReducer,
  { signUp, signIn, signOut, clearErrorMessage, tryLocalSignIn },
  { token: null, errorMessage: '', isLoading: true }
)

createDataContext.js


export default (reducer, actions, defaultValue) => {
  const Context = createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};

App.js


const StackScreen = () => (
  <Stacka.Navigator>
    <Stacka.Screen name="Drawer" component={DrawerStackScreen} />
    <Stacka.Screen name="App" component={AppStackScreen} />
  </Stacka.Navigator>
);

const App = () => {
  const { state } = useContext(AuthContext);

  if (state.isLoading) {
    return <LoadingScreen />;
  }

  return (
    <NavigationContainer>
      {state.token === null ? <AuthStackScreen /> : <StackScreen />}
    </NavigationContainer>
  );
};

export default () => (
  <ErrorBoundary>
    <AuthProvider>
      <Portal.Host>
        <App />
      </Portal.Host>
    </AuthProvider>
  </ErrorBoundary>
);

我是减速机的新手。我尝试过的：

卸载@ react-navigation / drawer
尝试删除AuthProvider
试图使用预先完成的文件，但出现相同的错误。

React Native-使用抽屉处理错误的上下文提供者

0 个答案: