react-native从零到一开发一个pad

graph TD
环境搭建 --> 搭建项目 --> 开发 --> 区分开发线上环境 --> 引入ui库--> 业务代码 --> 打包上架

环境搭建

科学上网是最重要的

以mac电脑为例(windows就搭过android环境)

安装依赖

mac ios环境

mac ios必须安装的依赖有:Node、Watchman、Xcode 和 CocoaPods。

注意: React Native 使用 .ruby-version 文件来确保您的 Ruby 版本与所需的版本相一致,需要安装一致的ruby;然后就是xcode,最好确定整个组员的版本一致

mac android环境

mac 安卓须安装的依赖有:Node、JDK 和 Android Studio。

主要注意:React Native 需要 Java Development Kit [JDK] 11。你可以在命令行中输入 javac -version(请注意是 javac,不是 java)来查看你当前安装的 JDK 版本

然后细节可自行一步一步按照react-native官网

坑点:

  • 安装环境的过程需要很长时间,很容易散失耐心,基本上所有的报错、安装下载太慢的问题都可以通过google搜到;比如之前遇到一个库很慢下不下来,通过这个issues解决
  • 安卓很容易碰到gradle版本不一致导致yarn android报错;所以建议所有插件都需要提前确定好稳定的、统一的版本;
  • 国内百度搜到的答案版本偏老不一定能解决,rn 0.69后很多使用方式都不同了,需要谷歌搜素,提升英语水平

项目搭建

是在github上找了个react-native模版模仿着搭建了一个项目,个人比较推荐,里面用到了很多比较常用的库,比如启动屏、环境变量(react-native-config)等等

UI库

react-native-paper

坑点:

只能使用基础版本的组件,不像web常用的antd那种,基本所有要咬到的组件在一个ui库就可以找到,如果项目ui自定义样式要求比较高,可能很多组件都得自己封装;比如写的一个滚轮组件就是参考这个库去实现

IOS上架

准备工作及流程:

  1. 申请ios开发者账号(个人、公司、企业)
  2. 生成描述文件、证书、buddleId
  3. 通过xcode配置证书、描述文件、添加开发者账号
  4. 打包:xcode->product->archive->生成ipa包推送->发布(应该有个图文说明)

具体发布可参考这个文档,打包和上传ipa文件还是直接通过xcode比较方便,这个文档应该主要是针对uniapp说明;

安卓上架

参考地址:zhuanlan.zhihu.com/p/70661748