相甫
Search K

Appearance

RN业务框架搭建 ​

一、背景 ​

业务线增多，为了快速构建RN业务架构，则需要一套基础业务模板，包含

  1. RN基础框架
  2. 工程化规范配置: 代码规范 ESlint，Prettier git提交规范 gi-cz husky
  3. 路由
  4. 状态机
  5. 网络
  6. UI
  7. 常用工具库

二、具体流程 ​

  1. RN基础框架

    为了能使用 React Native CLI 直接创建，要满足基础结构

    - tempalte
- package.json
- template.config.js

    template.config.js中的placeholderName就是template项目的名字，cli会根据这个直接替换成用户的项目名

    module.exports = {
  // Placeholder used to rename and replace in files
  // package.json, index.json, android/, ios/
  placeholderName: "ProjectName",

  // Directory with template
  templateDir: "./template",

  // Path to script, which will be executed after init
  // postInitScript: "./script.js"
};

    用官方的基础模板

    npx react-native init template

  2. 基础框架自动发布到npm，通过GitHub Action自动发布

  3. 前端工程化配置 husky + lint-staged

    在团队开发时，为了保证每个人提交的代码格式统一，采用husky + lint-staged 配置git hooks，自动触发格式化操作，对通过git add命令添加到暂存区的代码进行格式化

  4. 路由

    使用的react-navigation@6.x版本

    yarn add @react-navigation/native react-native-screens react-native-safe-area-context

    react-native-screens软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。编辑MainActivity.kt或MainActivity.java位于 下的文件android/app/src/main/java/<your package name>/。

    将突出显示的代码添加到MainActivity类的主体中：

    kotlin
    class MainActivity: ReactActivity() {
  // ...
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

    并确保在此文件顶部的包声明下方添加以下导入声明：

    java
    import android.os.Bundle;

    需要进行此更改，以避免与 View 状态在 Activity 重新启动期间未一致持久相关的崩溃。

  5. react-native-config多环境配置集成

​ 设置环境变量，可以统一在env文件中设置后，作用与js，安卓，ios原生代码及原生配置中

​ ios配合多个scheme可以在手机上安装不同环境的安装包

​ 安卓配合多渠道打包可以在手机上安装不同环境的安装包

  1. fastlane持续集成，自动化打包

    • fastlane init 初始化
    • fastlane ver 运行ver这个lane
    • fastlane ver ver:1.0.0 运行ver这个lane，并且传递ver这个参数
    • fastlane match init 初始化macth
    • fastlane match development 匹配开发模式并且初始化相关配置

  2. store

    Mobx到zustand

    mobx用类组件分析，全面拥抱hooks，用函数组件分析zustand

    从零实现 Mobx：深入理解 Mobx 原理

    image-20221011171044145

    zustand核心useSyncExternalStore

    image-20240217155334281

  3. axios网络请求

三、集成的库及其作用 ​

  1. react-native-gesture-handler Gesture Handler 旨在取代 React Native 的内置触摸系统，称为Gesture Responder System。
  2. react-native-safe-area-context 获取机型的刘海儿，安全区等距离
  3. react-native-config 设置环境变量，可以统一在env文件中设置后，作用与js，安卓，ios原生代码及原生配置中
  4. react-native-bootsplash 启动页

四、推荐组件 ​

类型推荐组件
文件操作react-native-fs | react-native-blob-util
路由react-navigation
文件选择器react-native-document-picker
图标react-native-vector-icons | @ant-design/icons-react-native | react-native-iconfont-cli
加解密react-native-rsa-native | crypto-js@3.3.0
异常处理react-native-exception-handler
压缩解压react-native-zip-archive | react-native-compressor
图像react-native-fast-image | react-native-auto-height-image
启动页react-native-bootsplash
骨架屏rn-placeholder
长列表@shopify/flash-list | recyclerlistview
环境变量react-native-config
软键盘react-native-keyboard-controller
选择器react-native-calendario
图表react-native-echarts
其他react-native-ticker | react-native-android-widget | react-native-render-html | react-native-orientation-locker

五、推荐阅读 ​

  1. [前端工程化配置] husky + lint-staged 格式化git提交代码
  2. git提交规范工具commitlint
  3. react-navigation

上次更新于: