tsrntemp 1.1.2 → 1.1.5

package/template/ios/template.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:template.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

package/template/package.json

@@ -1,49 +1,50 @@
-{
-  "name": "template",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "lint": "eslint .",
-    "start": "react-native start",
-    "test": "jest"
-  },
-  "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.17.11",
-    "@react-navigation/bottom-tabs": "^6.5.4",
-    "@react-navigation/native": "^6.1.3",
-    "@react-navigation/native-stack": "^6.9.9",
-    "react": "18.2.0",
-    "react-native": "0.71.1",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-screens": "^3.19.0",
-    "react-native-size-matters": "^0.4.0",
-    "react-native-svg": "^13.7.0",
-    "umi-request": "^1.4.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/plugin-proposal-decorators": "^7.20.13",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
-    "@react-native-community/eslint-config": "^3.0.0",
-    "@tsconfig/react-native": "^2.0.2",
-    "@types/jest": "^29.2.1",
-    "@types/react": "^18.0.24",
-    "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.2.1",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "eslint": "^8.19.0",
-    "jest": "^29.2.1",
-    "metro-react-native-babel-preset": "0.73.7",
-    "prettier": "^2.4.1",
-    "react-native-iconfont-cli": "^2.2.4",
-    "react-test-renderer": "18.2.0",
-    "typescript": "4.8.4"
-  },
-  "jest": {
-    "preset": "react-native"
-  }
-}
+{
+  "name": "template",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios --simulator 'iPhone 14'",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest",
+    "icon": "npx iconfont-rn"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.18.1",
+    "@react-navigation/bottom-tabs": "^6.5.7",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-safe-area-context": "^4.5.3",
+    "react-native-screens": "^3.20.0",
+    "react-native-size-matters": "^0.4.0",
+    "react-native-svg": "^13.9.0",
+    "umi-request": "^1.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/plugin-proposal-decorators": "^7.22.3",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@tsconfig/react-native": "^2.0.2",
+    "@types/jest": "^29.2.1",
+    "@types/react": "^18.0.24",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.2.1",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.73.9",
+    "prettier": "^2.4.1",
+    "react-native-iconfont-cli": "^2.2.4",
+    "react-test-renderer": "18.2.0",
+    "typescript": "4.8.4"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}

package/template/src/config/color.ts

@@ -11,10 +11,10 @@ export default {
     600: '#0891b2',
     700: '#0e7490',
     800: '#155e75',
-    900: '#164e63'
+    900: '#164e63',
   },
   secondary: {
-    50: ' #fdf2f8',
+    50: '#fdf2f8',
     100: '#fce7f3',
     200: '#fbcfe8',
     300: '#f9a8d4',
@@ -35,19 +35,19 @@ export default {
     600: '#059669',
     700: '#047857',
     800: '#065f46',
-    900: '#064e3b'
+    900: '#064e3b',
   },
   danger: {
     50: '#fff1f2',
-    100: ' #ffe4e6',
-    200: ' #fecdd3',
+    100: '#ffe4e6',
+    200: '#fecdd3',
     300: '#fda4af',
     400: '#fb7185',
     500: '#f43f5e',
     600: '#e11d48',
     700: '#be123c',
     800: '#9f1239',
-    900: ' #881337'
+    900: '#881337',
   },
   error: {
     50: '#fef2f2',
@@ -59,7 +59,7 @@ export default {
     600: '#dc2626',
     700: '#b91c1c',
     800: '#991b1b',
-    900: '#7f1d1d'
+    900: '#7f1d1d',
   },
   success: {
     50: '#f0fdf4',
@@ -71,7 +71,7 @@ export default {
     600: '#16a34a',
     700: '#15803d',
     800: '#166534',
-    900: '#14532d'
+    900: '#14532d',
   },
   warning: {
     50: '#fff7ed',
@@ -83,7 +83,7 @@ export default {
     600: '#ea580c',
     700: '#c2410c',
     800: '#9a3412',
-    900: '#7c2d12'
+    900: '#7c2d12',
   },
 
   muted: {
@@ -96,7 +96,7 @@ export default {
     600: '#525252',
     700: '#404040',
     800: '#262626',
-    900: '#171717'
+    900: '#171717',
   },
 
   info: {
@@ -109,7 +109,7 @@ export default {
     600: '#0284c7',
     700: '#0369a1',
     800: '#075985',
-    900: '#0c4a6e'
+    900: '#0c4a6e',
   },
 
   light: {
@@ -122,7 +122,7 @@ export default {
     600: '#57534e',
     700: '#44403c',
     800: '#292524',
-    900: '#1c1917'
+    900: '#1c1917',
   },
   rose: {
     50: '#fff1f2',
@@ -134,7 +134,7 @@ export default {
     600: '#e11d48',
     700: '#be123c',
     800: '#9f1239',
-    900: '#881337'
+    900: '#881337',
   },
   pink: {
     50: '#fdf2f8',
@@ -146,7 +146,7 @@ export default {
     600: '#db2777',
     700: '#be185d',
     800: '#9d174d',
-    900: '#831843'
+    900: '#831843',
   },
   fuchsia: {
     50: '#fdf4ff',
@@ -158,7 +158,7 @@ export default {
     600: '#c026d3',
     700: '#a21caf',
     800: '#86198f',
-    900: '#701a75'
+    900: '#701a75',
   },
   purple: {
     50: '#faf5ff',
@@ -170,7 +170,7 @@ export default {
     600: '#9333ea',
     700: '#7e22ce',
     800: '#6b21a8',
-    900: '#581c87'
+    900: '#581c87',
   },
   violet: {
     50: '#f5f3ff',
@@ -182,7 +182,7 @@ export default {
     600: '#7c3aed',
     700: '#6d28d9',
     800: '#5b21b6',
-    900: '#4c1d95'
+    900: '#4c1d95',
   },
   indigo: {
     50: '#eef2ff',
@@ -194,7 +194,7 @@ export default {
     600: '#4f46e5',
     700: '#4338ca',
     800: '#3730a3',
-    900: '#312e81'
+    900: '#312e81',
   },
   blue: {
     50: '#eff6ff',
@@ -206,7 +206,7 @@ export default {
     600: '#2563eb',
     700: '#1d4ed8',
     800: '#1e40af',
-    900: '#1e3a8a'
+    900: '#1e3a8a',
   },
   lightBlue: {
     50: '#f0f9ff',
@@ -218,7 +218,7 @@ export default {
     600: '#0284c7',
     700: '#0369a1',
     800: '#075985',
-    900: '#0c4a6e'
+    900: '#0c4a6e',
   },
   darkBlue: {
     50: '#dbf4ff',
@@ -230,7 +230,7 @@ export default {
     600: '#005db4',
     700: '#004282',
     800: '#002851',
-    900: '#000e21'
+    900: '#000e21',
   },
   cyan: {
     50: '#ecfeff',
@@ -242,7 +242,7 @@ export default {
     600: '#0891b2',
     700: '#0e7490',
     800: '#155e75',
-    900: '#164e63'
+    900: '#164e63',
   },
   teal: {
     50: '#f0fdfa',
@@ -254,7 +254,7 @@ export default {
     600: '#0d9488',
     700: '#0f766e',
     800: '#115e59',
-    900: '#134e4a'
+    900: '#134e4a',
   },
   emerald: {
     50: '#ecfdf5',
@@ -266,7 +266,7 @@ export default {
     600: '#059669',
     700: '#047857',
     800: '#065f46',
-    900: '#064e3b'
+    900: '#064e3b',
   },
   green: {
     50: '#f0fdf4',
@@ -278,7 +278,7 @@ export default {
     600: '#16a34a',
     700: '#15803d',
     800: '#166534',
-    900: '#14532d'
+    900: '#14532d',
   },
   lime: {
     50: '#f7fee7',
@@ -290,7 +290,7 @@ export default {
     600: '#65a30d',
     700: '#4d7c0f',
     800: '#3f6212',
-    900: '#365314'
+    900: '#365314',
   },
   yellow: {
     50: '#fefce8',
@@ -302,7 +302,7 @@ export default {
     600: '#ca8a04',
     700: '#a16207',
     800: '#854d0e',
-    900: '#713f12'
+    900: '#713f12',
   },
   amber: {
     50: '#fffbeb',
@@ -314,7 +314,7 @@ export default {
     600: '#d97706',
     700: '#b45309',
     800: '#92400e',
-    900: '#78350f'
+    900: '#78350f',
   },
   orange: {
     50: '#fff7ed',
@@ -326,7 +326,7 @@ export default {
     600: '#ea580c',
     700: '#c2410c',
     800: '#9a3412',
-    900: '#7c2d12'
+    900: '#7c2d12',
   },
   red: {
     50: '#fef2f2',
@@ -338,7 +338,7 @@ export default {
     600: '#dc2626',
     700: '#b91c1c',
     800: '#991b1b',
-    900: '#7f1d1d'
+    900: '#7f1d1d',
   },
   warmGray: {
     50: '#fafaf9',
@@ -350,7 +350,7 @@ export default {
     600: '#57534e',
     700: '#44403c',
     800: '#292524',
-    900: '#1c1917'
+    900: '#1c1917',
   },
   trueGray: {
     50: '#fafafa',
@@ -362,7 +362,7 @@ export default {
     600: '#525252',
     700: '#404040',
     800: '#262626',
-    900: '#171717'
+    900: '#171717',
   },
   gray: {
     50: '#fafafa',
@@ -374,7 +374,7 @@ export default {
     600: '#52525b',
     700: '#3f3f46',
     800: '#27272a',
-    900: '#18181b'
+    900: '#18181b',
   },
   coolGray: {
     50: '#f9fafb',
@@ -386,7 +386,7 @@ export default {
     600: '#4b5563',
     700: '#374151',
     800: '#1f2937',
-    900: '#111827'
+    900: '#111827',
   },
   blueGray: {
     50: '#f8fafc',
@@ -410,6 +410,6 @@ export default {
     600: '#d4d4d8',
     700: '#e4e4e7',
     800: '#f4f4f5',
-    900: '#fafafa'
-  }
-}
+    900: '#fafafa',
+  },
+};

package/template/src/config/routeArr.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import {StackParamList} from 'types/RouteParamList';
+import {RouteProp} from '@react-navigation/core/lib/typescript/src/types';
+import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
+import BottomTab, {getCurentTabName} from 'route/BottomTab';
+
+type RoutesConfig = {
+  name: keyof StackParamList;
+  component: React.ComponentType<any>;
+  options?:
+    | NativeStackNavigationOptions
+    | ((props: {
+        route: RouteProp<StackParamList, keyof StackParamList>;
+        navigation: any;
+      }) => NativeStackNavigationOptions);
+};
+const RouteArr: RoutesConfig[] = [
+  {
+    name: 'BottomTab',
+    component: BottomTab,
+    options: ({route}) => getCurentTabName(route),
+  },
+];
+
+export default RouteArr;

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

@@ -1,18 +1,28 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+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';
 
-export default class Home extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-  }
+const Home: React.FC<BottomTabScreenProps<BottomTabParamList>> = () => {
+  const insets = useSafeAreaInsets();
 
-  public render() {
-    console.log(Text.prototype)
-    return (
-      <View>
-         <Text>Home Component</Text>
-      </View>
-    );
-  }
-}
+  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,58 @@
+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;

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

@@ -1,19 +1,32 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+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',
 
-export default class Mine extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-  }
-
-  public render() {
-    return (
-      <View>
-        <Text>Mine Component</Text>
-      </View>
-    );
-  }
-}
+        // 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;

package/template/src/route/BottomTab.tsx

@@ -1,31 +1,64 @@
 import React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { BottomTabParamList } from 'types/RouteParamList';
+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.pink[900], headerShown: false }}
-    >
+      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} /> }}
+        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} /> }}
+        options={{
+          tabBarIcon: ({color, size}) => (
+            <IconFont name="mine" size={size} color={color} />
+          ),
+        }}
       />
     </Tab.Navigator>
-  )
-}
+  );
+};
 
-export default BottomTab
+export default BottomTab;