ReactNative开发一个轻量级APP

白桦
1,269 阅读3分钟

ReactNative开发项目的原理及实现社区已有许多的资料可以参考，本文主要是记录一下我在开发一个轻量级APP的过程中产生的思考及遇到的问题。

环境搭建

android和ios的开发环境搭建参考官网

项目搭建

  1. 初始化项目可以使用react-native-cli或者使用expo-cli，推荐使用expo-cli。expo-cli提供的项目模板更全面，可以选择是否接入expo工作流，可以选择是否使用TypeScript。

  2. 根据需要是否接入jest、eslint、prettier等，推荐配置自动格式化工具来维护代码格式一致性。

    • npm install husky lint-staged prettier
    • 在package.json文件中增加配置
      "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,json,md}": [
      "prettier --write",
      "git add"
    ],
    "*.{js,jsx,json,md}": [
      "prettier --write",
      "git add"
    ]
  }

  3. 目录结构

    ├── android // Android项目目录，包含了使用AndroidStudio开发项目的环境配置文件
├── ios // iOS项目目录，包含了XCode的环境
├── node_modules // 基于Node.js文件依赖系统产生的相关依赖和第三方库
├── src // 项目代码
    ├── apis // 接口请求
    ├── assets // 静态资源
    ├── components // 公共组件
    ├── constants // 公共常量
    ├── navigation // 导航相关
    ├── pages // 页面级组件
    ├── store // redux相关
    ├── utils // 工具
    └── App.js // 根组件
├── .babelrc // Babel配置文件，在.babelrc配置文件中，主要是对预设(presets)和插件(plugins)进行配置，因此不同的转译器作用不同的配置项
├── .buckconfig // Buck的配置文件，buck是Facebook开源的高效构建系统
├── .gitattributes // git配置文件，指定非文本文件的对比合并方式
├── .gitignore // git配置文件，用于忽略你不想提交到Git上的文件
├── .prettierrc // prettier配置文件，用于代码格式化
├── .watchmanconfig // watchman的配置文件，watchman用于监控文件变化，辅助实现工程修改信息
├── app.json // 应用配置文件
├── index.js // iOS或Android的入口
├── package.json // 项目基本信息以及依赖信息
├── README.md // README
└── yarn.lock // yarn install生成的文件，记录当前npm package的信息

  4. code-push热更新

    • code-push环境部署及热更新操作请参考code-push-cli

    • code-push集成到代码里面请参考react-native-code-push

      自动检测更新代码可以利用CodePush的高阶组件，简单配置如下：

      const CodePushOptions = {
  updateDialog: {
    appendReleaseDescription: true,
    descriptionPrefix: '',
    mandatoryContinueButtonLabel: '立即更新',
    mandatoryUpdateMessage: '',
    optionalIgnoreButtonLabel: '稍后',
    optionalInstallButtonLabel: '下载',
    optionalUpdateMessage: '',
    title: '发现新版本',
  },
}

class App extends PureComponent {
  codePushDownloadDidProgress(progress) {
    const percent = ((progress.receivedBytes / progress.totalBytes) * 100).toFixed(2) - 0
    Toast.info(`已下载：${percent}%`)
  }
  render() {
    return (
      <AntdProvider>
        <ReduxProvider store={store}>
          <AppNavigator ref={ref => NavigationService.setTopLevelNavigator(ref)} />
        </ReduxProvider>
      </AntdProvider>
    )
  }
}

export default CodePush(CodePushOptions)(App)

  5. APP多环境部署

    APP环境最好区分开发环境，测试环境，生产环境，不同的环境配置不同的应用图标、热更新deploymentKey等，具体配置参考Multi-Deployment Testing

    • android关键配置app/build.gradle文件中的buildTypes字段
    • ios根据文档配置xcode

  6. 本地运行

    下载npm依赖然后运行run-android或者run-ios，注意：初次运行ios项目时需要进入ios目录下运行pod install下载ios依赖

依赖推荐

  • UI库：推荐使用native-base
  • 图表库：图表一般利用WebView + Web图表库这样比较灵活
  • 导航：react-navigation

第三方库参考

avatar
文章
阅读
粉丝