tsrntemp 1.1.5 → 1.2.0

package/template/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './routesConfig';

package/template/src/config/routesConfig.ts

@@ -0,0 +1,10 @@
+import {RoutesConfig} from '@/types';
+import BottomTab from '@/route/BottomTab';
+
+export const routesConfig: RoutesConfig[] = [
+  {
+    name: 'BottomTab',
+    component: BottomTab,
+    options: {headerShown: false},
+  },
+];

package/template/src/pages/Home/index.tsx

@@ -1,28 +1,25 @@
-import React from 'react';
-import {View, Text} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
-import {BottomTabParamList} from 'types/RouteParamList';
-
-const Home: React.FC<BottomTabScreenProps<BottomTabParamList>> = () => {
-  const insets = useSafeAreaInsets();
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'space-between',
-        alignItems: 'center',
-
-        // Paddings to handle safe area
-        paddingTop: insets.top,
-        paddingBottom: insets.bottom,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}>
-      <Text>Home Component</Text>
-    </View>
-  );
-};
-
-export default Home;
+import React from 'react';
+import {View, Text} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
+const Home: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+
+        // Paddings to handle safe area
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}>
+      <Text>Home Component</Text>
+    </View>
+  );
+};
+
+export default Home;

package/template/src/pages/Login/index.tsx

@@ -1,58 +1,50 @@
-import React from 'react';
-import {
-  View,
-  TextInput,
-  StyleSheet,
-  TouchableOpacity,
-  Text,
-} from 'react-native';
-import color from 'config/color';
-import {AuthContext} from 'route/RouteContainer';
-
-const Login: React.FC = () => {
-  const {signIn} = React.useContext(AuthContext);
-  return (
-    <View style={styles.content}>
-      <TextInput placeholder="Username" style={[styles.input]} />
-      <TextInput
-        placeholder="Password"
-        secureTextEntry
-        style={[styles.input]}
-      />
-      <TouchableOpacity
-        style={styles.btn}
-        onPress={() => signIn({userInfo: 'xxx'})}>
-        <Text style={styles.text}>登录</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    padding: 16,
-    justifyContent: 'center',
-  },
-  input: {
-    margin: 8,
-    padding: 10,
-    borderRadius: 3,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: color.primary[400],
-  },
-  button: {
-    margin: 8,
-  },
-  text: {
-    textAlign: 'center',
-    margin: 8,
-  },
-  btn: {
-    backgroundColor: color.primary[400],
-    marginTop: 16,
-    borderRadius: 5,
-  },
-});
-
-export default Login;
+import React from 'react';
+import {View, TextInput, StyleSheet, Text, Pressable} from 'react-native';
+import {UserContext} from '@/serviceType';
+import {color} from '@/config';
+import {AppScreenProps} from '@/types';
+
+const Login: React.FC<AppScreenProps<'Login'>> = () => {
+  const {signIn} = React.useContext(UserContext);
+  return (
+    <View style={styles.content}>
+      <TextInput placeholder="Username" style={[styles.input]} />
+      <TextInput
+        placeholder="Password"
+        secureTextEntry
+        style={[styles.input]}
+      />
+      <Pressable style={styles.btn} onPress={() => signIn({userInfo: 'xxx'})}>
+        <Text style={styles.text}>登录</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  input: {
+    margin: 8,
+    padding: 10,
+    borderRadius: 3,
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  button: {
+    margin: 8,
+  },
+  text: {
+    textAlign: 'center',
+    margin: 8,
+  },
+  btn: {
+    backgroundColor: color.primary[400],
+    marginTop: 16,
+    borderRadius: 5,
+  },
+});
+
+export default Login;

package/template/src/pages/Mine/index.tsx

@@ -1,32 +1,30 @@
-import React from 'react';
-import {View, Text, TouchableOpacity} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {AuthContext} from 'route/RouteContainer';
-import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
-import {BottomTabParamList} from 'types/RouteParamList';
-
-const Mine: React.FC<BottomTabScreenProps<BottomTabParamList>> = () => {
-  const insets = useSafeAreaInsets();
-  const {signOut} = React.useContext(AuthContext);
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'space-between',
-        alignItems: 'center',
-
-        // Paddings to handle safe area
-        paddingTop: insets.top,
-        paddingBottom: insets.bottom,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}>
-      <TouchableOpacity onPress={signOut}>
-        <Text>退出登录</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default Mine;
+import React from 'react';
+import {View, Text, Pressable} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {UserContext} from '@/serviceType';
+
+const Mine: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const {signOut} = React.useContext(UserContext);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+
+        // Paddings to handle safe area
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}>
+      <Pressable onPress={signOut}>
+        <Text>退出登录</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+export default Mine;

package/template/src/route/BottomTab.tsx

@@ -1,64 +1,44 @@
-import React from 'react';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {BottomTabParamList, StackParamList} from 'types/RouteParamList';
-import Home from 'pages/Home';
-import Mine from 'pages/Mine';
-import IconFont from 'iconfont';
-import color from 'config/color';
-import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
-import {RouteProp} from '@react-navigation/core/lib/typescript/src/types';
-import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
-
-const Tab = createBottomTabNavigator<BottomTabParamList>();
-
-export function getCurentTabName(
-  route: RouteProp<StackParamList>,
-): NativeStackNavigationOptions {
-  let routeName = getFocusedRouteNameFromRoute(route) ?? '首页';
-  switch (routeName) {
-    case 'Home':
-      routeName = '首页';
-      break;
-    case 'Mine':
-      routeName = '我的';
-      break;
-    default:
-      routeName = '首页';
-      break;
-  }
-  return {
-    headerTitle: routeName,
-  };
-}
-
-const BottomTab: React.FC = () => {
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        tabBarActiveTintColor: color.primary[400],
-        headerShown: false,
-      }}
-      backBehavior={'none'}>
-      <Tab.Screen
-        name={'Home'}
-        component={Home}
-        options={{
-          tabBarIcon: ({color, size}) => (
-            <IconFont name="index" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name={'Mine'}
-        component={Mine}
-        options={{
-          tabBarIcon: ({color, size}) => (
-            <IconFont name="mine" size={size} color={color} />
-          ),
-        }}
-      />
-    </Tab.Navigator>
-  );
-};
-
-export default BottomTab;
+import React from 'react';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {BottomTabParamList} from '@/types';
+import Home from '@/pages/Home';
+import Mine from '@/pages/Mine';
+import {color} from '@/config';
+import IconFont from '@/iconfont';
+
+const Tab = createBottomTabNavigator<BottomTabParamList>();
+
+const BottomTab: React.FC = () => {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        tabBarActiveTintColor: color.primary[400],
+      }}
+      backBehavior={'none'}>
+      <Tab.Screen
+        name="Home"
+        component={Home}
+        options={{
+          tabBarLabel: '首页',
+          headerTitle: '首页',
+          tabBarIcon: ({color, size}) => (
+            <IconFont name="index" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Mine"
+        component={Mine}
+        options={{
+          headerTitle: '我的',
+          tabBarLabel: '我的',
+          tabBarIcon: ({color, size}) => (
+            <IconFont name="mine" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTab;

package/template/src/route/RouterContainer.tsx

@@ -0,0 +1,81 @@
+/**
+ * @file RouterContainer
+ * @created 2024/4/26
+ * @dec 页面容器
+ */
+import React, {useReducer} from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {
+  CardStyleInterpolators,
+  createStackNavigator,
+} from '@react-navigation/stack';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {StackParamList} from '@/types';
+import {UserContext, UserInfo, UserInfoAction} from '@/serviceType';
+import {routesConfig} from '@/config';
+import Login from '@/pages/Login';
+
+const Stack = createStackNavigator<StackParamList>();
+
+const initialState: UserInfo = null;
+
+function stateReducer(state: UserInfo, action: UserInfoAction): UserInfo {
+  switch (action.type) {
+    case 'signOut':
+      return null;
+    case 'signIn':
+      return action.value;
+    default:
+      throw new Error('Unknown action');
+  }
+}
+const RouterContainer: React.FC = () => {
+  const [userInfo, dispatch] = useReducer(stateReducer, initialState);
+  const authContext = React.useMemo(
+    () => ({
+      userInfo,
+      signIn: (data: UserInfo) => {
+        // In a production app, we need to send some data (usually username, password) to server and get a token
+        // We will also need to handle errors if sign in failed
+        // After getting token, we need to persist the token using `SecureStore`
+        // In the example, we'll use a dummy token
+
+        dispatch({type: 'signIn', value: data});
+      },
+      signOut: () => dispatch({type: 'signOut'}),
+    }),
+    [userInfo],
+  );
+
+  return (
+    <SafeAreaProvider style={{flex: 1}}>
+      <UserContext.Provider value={authContext}>
+        <NavigationContainer>
+          <Stack.Navigator
+            screenOptions={{
+              headerTitleAlign: 'center',
+              headerBackTitleVisible: false,
+              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+              gestureEnabled: true,
+              gestureDirection: 'horizontal',
+            }}>
+            {userInfo ? (
+              routesConfig.map(v => (
+                <Stack.Screen
+                  key={v.name}
+                  name={v.name}
+                  component={v.component}
+                  options={v.options ?? undefined}
+                />
+              ))
+            ) : (
+              <Stack.Screen name="Login" component={Login} />
+            )}
+          </Stack.Navigator>
+        </NavigationContainer>
+      </UserContext.Provider>
+    </SafeAreaProvider>
+  );
+};
+
+export default RouterContainer;

package/template/src/serviceType/LoginUserInfo.ts

@@ -0,0 +1,19 @@
+import {createContext} from 'react';
+
+export type UserInfo = any;
+
+export type UserInfoAction =
+  | {type: 'signOut'}
+  | {type: 'signIn'; value: UserInfo};
+
+export type UserInfoContext = {
+  signIn: (v: UserInfo) => void;
+  signOut: () => void;
+  userInfo?: UserInfo;
+};
+
+export const UserContext = createContext<UserInfoContext>({
+  userInfo: null,
+  signIn: () => {},
+  signOut: () => {},
+});

package/template/src/serviceType/index.ts

@@ -0,0 +1 @@
+export * from './LoginUserInfo';

package/template/src/types/index.ts

@@ -0,0 +1 @@
+export * from './routes';

package/template/src/types/routes.ts

@@ -0,0 +1,61 @@
+/**
+ * 路由相关的类型声明文件
+ */
+import type {CompositeScreenProps, RouteProp} from '@react-navigation/native';
+import type {
+  StackNavigationOptions,
+  StackNavigationProp,
+} from '@react-navigation/stack';
+import type {StackScreenProps} from '@react-navigation/stack';
+import type {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
+
+//底部导航类型申明
+export type BottomTabParamList = {
+  Home: undefined;
+  Mine: undefined;
+};
+
+// 全部导航生命
+export type StackParamList = {
+  BottomTab: undefined;
+  Login: undefined;
+};
+
+// 导航组件类型声明 eg:@/config/routesConfig
+export type RoutesConfig = {
+  name: keyof StackParamList;
+  component: React.ComponentType<any>;
+  options?:
+    | StackNavigationOptions
+    | ((props: {
+        route: RouteProp<StackParamList, keyof StackParamList>;
+        navigation: StackNavigationProp<StackParamList>;
+      }) => StackNavigationOptions);
+};
+
+// 堆栈导航组件参数类型泛型 eg:
+/**
+ * const Login:React.FC<StackScreenProps<'Login'>>=({navigation,route})=>{
+ *   return(
+ *   ......
+ *   )
+ * }
+ */
+export type AppScreenProps<T extends keyof StackParamList> = StackScreenProps<
+  StackParamList,
+  T
+>;
+
+// 底部嵌套路由导航类型声明 用做在bottom-tab页面中获取navigation，route等参数时等类型提示
+export type BottomScreenProps<T extends keyof BottomTabParamList> =
+  CompositeScreenProps<
+    BottomTabScreenProps<BottomTabParamList, T>,
+    AppScreenProps<keyof StackParamList>
+  >;
+
+// 为useNavigation hooks提供全局的参数提示
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends StackParamList {}
+  }
+}

package/template/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './storage';
+export * from './request';

package/template/src/utils/request.ts

@@ -1,28 +1,28 @@
-//请求工具库
-/**
- * 使用可参照https://www.npmjs.com/package/umi-request
- */
-import {extend, ResponseError} from 'umi-request';
-
-//错误处理
-const errorHandler = (error: ResponseError) => {
-  if (error.response) {
-    // The request was made and the server responded with a status code
-    // that falls out of the range of 2xx
-    console.log(error.response.status);
-    console.log(error.response.headers);
-    console.log(error.data);
-    console.log(error.request);
-  } else {
-    // 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,
-});
-
-export default request;
+//请求工具库
+/**
+ * 使用可参照https://www.npmjs.com/package/umi-request
+ */
+import {extend, ResponseError} from 'umi-request';
+
+//错误处理
+const errorHandler = (error: ResponseError) => {
+  if (error.response) {
+    // The request was made and the server responded with a status code
+    // that falls out of the range of 2xx
+    console.log(error.response.status);
+    console.log(error.response.headers);
+    console.log(error.data);
+    console.log(error.request);
+  } else {
+    // 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,
+});
+
+export default request;

package/template/src/utils/storage.ts

@@ -1,67 +1,3 @@
-// 缓存工具库
-/**
- * 使用可以参照
- * https://react-native-async-storage.github.io/async-storage/docs/usage
- */
-import AsyncStorage from '@react-native-async-storage/async-storage';
-
-export default class Storage {
-  //读取数据
-  static async getItem(key: string) {
-    try {
-      return AsyncStorage.getItem(key);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  //保存数据
-  static async setItem(key: string, val: string) {
-    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);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  //清除指缓存
-  static async clearItem(key: string) {
-    return AsyncStorage.removeItem(key);
-  }
-
-  // 获取所有已存储的键
-  static async getAllKeys() {
-    return AsyncStorage.getAllKeys();
-  }
-
-  // 批量获取数据
-  static async getMultiple(key: readonly string[]) {
-    return AsyncStorage.multiGet(key);
-  }
-
-  // 批量设置数据
-  static async multiSet(keyValuePairs: [string, string][]) {
-    return AsyncStorage.multiSet(keyValuePairs);
-  }
-
-  // 批量更新数据
-  static async updateMultiple(keyValuePairs: [string, string][]) {
-    return AsyncStorage.multiMerge(keyValuePairs);
-  }
-
-  //批量移除
-  static async multiClear(key: string[]) {
-    return AsyncStorage.multiRemove(key);
-  }
-
-  // 清除所有缓存
-  static async clearAll() {
-    return AsyncStorage.clear();
-  }
-}
+import {MMKV} from 'react-native-mmkv';
+
+export default new MMKV();