react-native-template-drc

该项目为 React Native 模板，使用前请先按照官方文档完成环境搭建，确保官方 demo 能正常运行

使用方法

react native init YourProject --template react-native-template-drc

或使用 npx：

npx react native init YourProject --template react-native-template-drc

所需环境

• typescript

npm i typescript -g

• ts-node

npm i ts-node -g

• npm = 6.x.x

目录结构

src
│
├── js  //代码目录
│   ├── index.tsx //入口
│   ├── App.tsx   //业务入口
│   │
│   ├── components   //组件目录
│   │
│   ├── config          //配置目录
│   │   ├── api.ts      //API定义
│   │   ├── index.ts    //API地址
│   │   ├── system.ts   //系统参数
│   │   ├── theme.ts    //主题Dao
│   │   └── token.ts    //token Dao
│   │
│   ├── navigation          //导航目录
│   │   ├── LoginStack.tsx  //登录路由
│   │   ├── MainStack.tsx   //主路由
│   │   ├── TabStack.tsx    //底部路由
│   │   ├── controller.ts   //路由控制器
│   │   └── index.tsx       //总路由入口
│   │
│   ├── pages   //页面目录
│   │   ├── common  //通用页面目录
│   │   ├── home    //首页模块
│   │   │   └── index.tsx
│   │   ├── login   //登录模块
│   │   │   └── login.tsx
│   │   └── user    //个人中心模块
│   │       └── index.tsx
│   │
│   ├── redux   //Redux目录
│   │   ├── index.ts  //Redux配置
│   │   └── models    //模块目录
│   │       ├── index.ts    //总模块入口
│   │       ├── global.ts    //主题、语言等全局配置
│   │       ├── user.ts     //用户信息
│   │       └── utils.ts    //工具
│   │
│   └── utils   //通用工具目录
│       ├── sub       //工具子分类
│       ├── http.ts   //网络请求
│       └── utils.ts  //通用工具
│
│
├── res  //资源目录
│   ├── Locale.ts   //国际化操作类
│   ├── index.ts    //国际化资源入口
│   │
│   ├── colors  //颜色目录
│   │   ├── en.ts
│   │   └── zh.ts
│   │
│   ├── image   //图片目录
│   │   ├── arrow_back.png
│   │   └── i18n
│   │       ├── en.ts
│   │       ├── image_script.js //图片脚本
│   │       └── zh.ts
│   │
│   └── strings  //文字目录
│       ├── en.ts
│       ├── string_script.ts  //文字脚本
│       ├── type.ts
│       └── zh.ts

用法与规范

资源篇

Image

建议统一使用 3 倍图，添加图片前先经过压缩再导入 res/image 目录下，导入后运行 image/i18n/image_script.js 脚本

使用示例：

Locale.getImage('arrow_back')

命名规则

示例：arrow_back.png

统一使用小写（英文缩写除外），用下划线连接

1. 先定义大的类型，即它是什么，如 arrow，箭头，若没有其他同类型图片，则可以到此结束命名
2. 若有相同类型，则再定义和别的箭头的区别，如 back，返回箭头。常见区别：颜色、形状、布局位置、使用的场景/页面、顺序等
3. 若有国际化需求，添加对应语言后缀，如 arrow_back_zh.png、arrow_back_en.png

注意

若出现提示不生效，手动打开一次 strings/i18n/zh.ts

String

如果多个模块出现相同文案，不要跨模块使用，而是分别添加文案，如 home 模块不使用 login 模块的文案，通用模块除外。添加后执行 strings/string_script.ts

使用示例：

Locale.getString('get_sms_code')

命名规则

示例：get_sms_code: '获取短信验证码'

统一使用小写（英文缩写除外），用下划线连接

1. 每个中文含义都翻译，如示例中不叫 get_code，也不叫 get_sms，因为考虑到以后可能有相似内容共存
2. 后缀添加文案类型，常见类型后缀：

• holder：输入框占位文案
• tip：提示语
• 数字：多个且有顺序的内容，如 tip_1、tip_2
• error：错误提示语

3. 变量使用%{key}声明，使用示例：

Locale.getString('get_sms_code', {key: '123'})

注意

若出现提示不生效，手动打开一次 strings/type.ts

路由篇

//两种路由使用方式

/**
 * 1.使用props ⭐️推荐使用⭐️
 * 优点：兼容传统写法
 * 缺点：需要声明props类型，只能在路由页面中使用，只能获取当前页面参数
 */
props.navigation.navigate('Home',{param:'xxx'})
props.route.params

/**
 * 2.使用路由实例
 * 优点：使用简洁，可在路由外使用，可获取任意页面参数
 * 缺点：侵入性强，不兼容传统写法，需自己映射路由方法
 */
NavigationController.navigate('Home',{param:'xxx'})
NavigationController.getParams('Home')

VSCode - User Snippets：

 "hook_ts": {
    "prefix": "hook_ts",
    "body": [
      "import React,{useLayoutEffect} from 'react'",
      "import {} from 'react-native'",
      "import {useSelector} from 'react-redux'",
      "import {RouteProps} from '@path/navigation/controller'",
      "import Locale from '@path/locale'",
      "import {RootState} from '@path/redux'",
      "import _ from 'lodash'",

      "export interface $ClassName+Params {}",

      "const $ClassName = (props: RouteProps<'$ClassName'>) => {",
      "const global = useSelector((state: RootState) => state.global,(prev,next)=> _.isEqual(prev,next))",

      "useLayoutEffect(() => {",
      "props.navigation.setOptions({",
      "headerTitle: '',",
      "})",
      "}, [props.navigation, global])",

      "return (",
      "<></>",
      ")",
      "}",

      "export default $ClassName"
    ]
  },