tsrntemp 1.1.3 → 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,18 +1,25 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-
-export default class Home extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-  }
-
-  public render() {
-    console.log(Text.prototype)
-    return (
-      <View>
-         <Text>Home Component</Text>
-      </View>
-    );
-  }
-}
-
+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

@@ -0,0 +1,50 @@
+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,19 +1,30 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-
-
-
-export default class Mine extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-  }
-
-  public render() {
-    return (
-      <View>
-        <Text>Mine Component</Text>
-      </View>
-    );
-  }
-}
-
+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,31 +1,44 @@
-import React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { BottomTabParamList } from 'types/RouteParamList';
-import Home from 'pages/Home';
-import Mine from 'pages/Mine';
-import IconFont from 'iconfont';
-import color from 'config/color';
-
-const Tab = createBottomTabNavigator<BottomTabParamList>();
-
-
-const BottomTab: React.FC = () => {
-  return (
-    <Tab.Navigator
-      screenOptions={{ tabBarActiveTintColor: color.pink[900], headerShown: false }}
-    >
-      <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,29 +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,69 +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) {
-    return AsyncStorage.setItem(key, val)
-  }
-
-  //更新保存数据
-  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();

package/template/tsconfig.json

@@ -1,74 +1,9 @@
-
 {
+  "extends": "@tsconfig/react-native/tsconfig.json",
   "compilerOptions": {
-    /* Basic Options */
-    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es2017"],                        /* Specify library files to be included in the compilation. */
-    "allowJs": true,                          /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    // "outDir": "./",                        /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    "noEmit": true,                           /* Do not emit outputs. */
-    // "incremental": true,                   /* Enable incremental compilation */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    "baseUrl": ".",
     "paths": {
-      "*": ["./src/*"],
-      "@components": ["./src/components/*"],
-      "@assets": ["./src/assets/*"],
-      "@pages": ["./src/pages/*"],
-      "@route": ["./src/route/*"],
-      "@utils": ["./src/utils/*"],
-      "@types": ["./src/types/*"],
-      "@config": ["./src/config/*"],
-      "@iconfont": ["./src/iconfont/*"]
-    },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
-    "resolveJsonModule": true,                 /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */
-
-    /* Source Map Options */
-    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-  },
-  "exclude": [
-    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
-  ]
+      "@/*": ["src/*"]
+    }
+  }
 }