tsrntemp 1.1.2 → 1.1.5

package/template/src/route/RouteContainer.tsx

@@ -1,28 +1,156 @@
-import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import RouteArr from 'config/routeConfig';
-import { StackParamList } from 'types/RouteParamList';
+import React, {useReducer, useMemo, useEffect} from 'react';
+import {StyleSheet, View, ActivityIndicator} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import Login from 'pages/Login';
+import {StackParamList} from 'types/RouteParamList';
+import Storage from 'utils/storage';
+import color from 'config/color';
+import RouteArr from 'config/routeArr';
 
-const Stack = createNativeStackNavigator<StackParamList>()
+const Stack = createNativeStackNavigator<StackParamList>();
+
+export const AuthContext = React.createContext<{
+  isSignedIn: boolean;
+  signIn: (T: any) => void;
+  signOut: () => void;
+}>({
+  isSignedIn: false,
+  signIn: () => {},
+  signOut: () => {},
+});
+
+type State = {
+  isLoading: boolean;
+  isSignout: boolean;
+  userInfo: undefined | string;
+};
+
+type Action =
+  | {type: 'RESTORE_TOKEN'; user: undefined | string}
+  | {type: 'SIGN_IN'; user: string}
+  | {type: 'SIGN_OUT'};
+
+// APP初始化加载登录信息
+const SplashScreen = () => {
+  return (
+    <View style={styles.content}>
+      <ActivityIndicator />
+    </View>
+  );
+};
 
 const RouterContainer: React.FC = () => {
+  // 初始化登录信息
+  const [state, dispatch] = useReducer<React.Reducer<State, Action>>(
+    (prevState, action) => {
+      switch (action.type) {
+        case 'RESTORE_TOKEN':
+          return {
+            ...prevState,
+            userInfo: action.user,
+            isLoading: false,
+          };
+        case 'SIGN_IN':
+          return {
+            ...prevState,
+            isLoading: false,
+            isSignout: false,
+            userInfo: action.user,
+          };
+        case 'SIGN_OUT':
+          return {
+            ...prevState,
+            isSignout: true,
+            isLoading: false,
+            userInfo: undefined,
+          };
+      }
+    },
+    {
+      isLoading: true,
+      isSignout: false,
+      userInfo: undefined,
+    },
+  );
+
+  // 获取当前登录信息
+  useEffect(() => {
+    Storage.getItem('userInfo').then(res => {
+      if (!res) {
+        return dispatch({type: 'SIGN_OUT'});
+      }
+      return dispatch({type: 'SIGN_IN', user: res});
+    });
+  }, []);
+
+  const isSignedIn = state.userInfo !== undefined;
+
+  const authContext = useMemo(
+    () => ({
+      isSignedIn,
+      signIn: (T: any) => {
+        dispatch({type: 'SIGN_IN', user: T});
+        Storage.setItem('userInfo', T);
+      },
+      signOut: () => {
+        dispatch({type: 'SIGN_OUT'});
+        Storage.clearItem('userInfo');
+      },
+    }),
+    [isSignedIn],
+  );
+
+  if (state.isLoading) {
+    return <SplashScreen />;
+  }
+
   return (
-    <SafeAreaProvider>
-      <NavigationContainer>
-        <Stack.Navigator
-          screenOptions={{
-            headerBackTitleVisible: false,
-            headerTitleAlign: 'center'
-          }}
-        >
-          {
-            RouteArr.map(v => <Stack.Screen key={v.name} name={v.name} component={v.component} options={v.options} />)
-          }
-        </Stack.Navigator>
-      </NavigationContainer>
-    </SafeAreaProvider>
-  )
-}
-export default RouterContainer
+    <AuthContext.Provider value={authContext}>
+      <SafeAreaProvider>
+        <NavigationContainer>
+          <Stack.Navigator
+            screenOptions={{
+              headerBackTitleVisible: false,
+              headerTitleAlign: 'center',
+              headerStyle: {
+                backgroundColor: color.primary[400],
+              },
+            }}>
+            {isSignedIn ? (
+              <Stack.Group>
+                {RouteArr.map(v => (
+                  <Stack.Screen
+                    key={v.name}
+                    name={v.name}
+                    component={v.component}
+                    options={v.options ?? {}}
+                  />
+                ))}
+              </Stack.Group>
+            ) : (
+              <Stack.Group>
+                <Stack.Screen
+                  name="Login"
+                  component={Login}
+                  options={{headerTitle: '登录'}}
+                />
+              </Stack.Group>
+            )}
+          </Stack.Navigator>
+        </NavigationContainer>
+      </SafeAreaProvider>
+    </AuthContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+});
+
+export default RouterContainer;

package/template/src/types/RouteParamList.ts

@@ -2,8 +2,9 @@
 export type BottomTabParamList = {
   Home: undefined;
   Mine: undefined;
-}
+};
 
 export type StackParamList = {
-  BottomTab: undefined
-}
+  BottomTab: undefined;
+  Login: undefined;
+};

package/template/src/utils/request.ts

@@ -2,7 +2,7 @@
 /**
  * 使用可参照https://www.npmjs.com/package/umi-request
  */
-import { extend, ResponseError } from 'umi-request';
+import {extend, ResponseError} from 'umi-request';
 
 //错误处理
 const errorHandler = (error: ResponseError) => {
@@ -17,13 +17,12 @@ const errorHandler = (error: ResponseError) => {
     // The request was made but no response was received or error occurs when setting up the request.
     console.log(error.message);
   }
-}
+};
 
 const request = extend({
   // prefix:'',
   timeout: 1000,
-  errorHandler
-})
+  errorHandler,
+});
 
-
-export default request
+export default request;

package/template/src/utils/storage.ts

@@ -6,64 +6,62 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export default class Storage {
-
   //读取数据
   static async getItem(key: string) {
     try {
-      return AsyncStorage.getItem(key)
+      return AsyncStorage.getItem(key);
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
   }
 
   //保存数据
   static async setItem(key: string, val: string) {
-    return AsyncStorage.setItem(key, val)
+    const value = typeof val === 'string' ? val : JSON.stringify(val);
+    return AsyncStorage.setItem(key, value);
   }
 
   //更新保存数据
   static async updateItem(key: string, val: string) {
     try {
-      return AsyncStorage.mergeItem(key, val)
+      return AsyncStorage.mergeItem(key, val);
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
   }
 
   //清除指缓存
   static async clearItem(key: string) {
-    return AsyncStorage.removeItem(key)
+    return AsyncStorage.removeItem(key);
   }
 
   // 获取所有已存储的键
   static async getAllKeys() {
-    return AsyncStorage.getAllKeys()
+    return AsyncStorage.getAllKeys();
   }
 
   // 批量获取数据
   static async getMultiple(key: readonly string[]) {
-    return AsyncStorage.multiGet(key)
+    return AsyncStorage.multiGet(key);
   }
 
   // 批量设置数据
   static async multiSet(keyValuePairs: [string, string][]) {
-    return AsyncStorage.multiSet(keyValuePairs)
+    return AsyncStorage.multiSet(keyValuePairs);
   }
 
   // 批量更新数据
   static async updateMultiple(keyValuePairs: [string, string][]) {
-    return AsyncStorage.multiMerge(keyValuePairs)
+    return AsyncStorage.multiMerge(keyValuePairs);
   }
 
   //批量移除
   static async multiClear(key: string[]) {
-    return AsyncStorage.multiRemove(key)
+    return AsyncStorage.multiRemove(key);
   }
 
   // 清除所有缓存
   static async clearAll() {
-    return AsyncStorage.clear()
+    return AsyncStorage.clear();
   }
-
 }
-