React Native -- 项目实战复盘

2018-09-10 本文已影响90人 PetitBread

本项目系统基于macOS High Sierra 10.13.6
RN 版本 react-native-cli 2.0.1 react-native 0.56.0

慕课跟学的一个 RN 的基础项目Demo(目前只针对 iOS 这一块)，做个复盘,方便从广度上对 React Native 有一个基本的认识

项目大致功能

使用GitHub 的trending功能来查看最热最火的开源项目，可以进行查看、收藏、分享等操作。
可以订阅我所喜欢的标签或语言

项目内容包括

列表和一些控件的基本使用
界面间的传值和跳转
与原生交互，分享与第三方登录
解决启动白屏的问题
CodePush 热更新的使用
项目打包和发布

先搭建好最基本的开发环境
 这里是我碰到的一些错误的整理

用 WebStorm 打开项目RNGit_Demo，确保本机上安装了 Xcode，终端执行 npm install,然后react-native run-ios，这样就可以看到项目效果,大概了解下项目做了哪些东西

还有一个要优先知道的东西就是RN如何调试

项目结构分析

如果没有前端经验，第一次接触 RN 项目是比较懵的，所以第一步我们需要先知道它的项目结构

android：Android的原生开发目录，可以用Android Studio打开进行原生开发。

iOS: iOS的原生开发目录，可以用Xcode打开进行原生开发。

node_modules: 存放所有的项目依赖库，配置package.json之后执行“npm install”后自动创建的文件夹。

.babelrc: Babel的配置文件,Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。babelrc用来设置转码规则和插件。

.buckconfig: buck的配置文件，buck是Facebook推出的一款高效率的App项目构建工具。

.flowconfig: Flow 是 Facebook 旗下一个为 JavaScript 进行静态类型检测的检测工具。它可以在 JavaScript 的项目中用来捕获常见的 bugs，比如隐式类型转换，空引用等等。

.gitattributes: git属性文件设定一些项目特殊的属性。比如要比较word文档的不同；对strings程序进行注册；合并冲突的时候不想合并某些文件等等。

.gitignore: 用来配置git提交需要忽略的文件。

.watchmanconfig: 用于监控bug文件和文件变化，并且可以出发指定的操作。

app.json: 配置了name和displayName

index.js  Android 和iOS 入口文件，可以在android的MainApplication中的ReactNativeHost中重写getJSMainModuleName()方法更改; 在iOS的AppDelegate.m文件的didFinishLaunchingWithOptions方法中通过jsBundleURLForBundleRoot可以更改入口文件。

package.json: 定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

跟着项目看，入口就是 index.js 文件了，从这里开始看

index.js ->setup.js->AppNavigator.js

AppNavigator 是路由，所有需要跳转的页面都需要在这里注册，导航组件参考这里

WelcomePage 欢迎页，在实际项目中做导航页，然后到首页

HomePage,这个页面可以理解为 iOS 的 tabbar 设置页，这里需要知道React-Native 的生命周期和一些基本语法,Props 和 State 是优先要理解的，很重要。

PopularPage 模块的列表用的 FlatList, 数据请求封装在 DataRepository.js内，这一块需要知道 Promise 语法与 then 的用法的使用,Fetch 基本使用

MyPage 模块里包括功能有

codePush热更新
原生模块的交互
自定义标签与排序

codePush热更新跟上面那个教程就 OK 了，有要注意的地方就是打包命令这里

react-native bundle --platform ios --entry-file index.android.js --bundle-output ./bundles/index. ios.bundle --dev false

RN 更新之后已经统一了入口文件，需要改为

react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/index. ios.bundle --dev false

如果有报 --entry-file option missing之类的错误，检查下有没有拼写错误.

在真机上跑 RN 项目, 命令是

react-native run-ios --device "xxx"
//xxx 是你的手机名

启动白屏问题

首先要知道原生 iOS 启动页，它的消失时间就是 didFinishLaunchingWithOptions的函数周期走完，我们平时需要将启动页延迟消失可以采用阻塞主线程来达到目的

知道这个好办，我们可以在 didFinishLaunchingWithOptions里每0.1s休眠一次，直到 RN 中页面加载完成，在 js 文件的 componentDidMount内再调用原生方法取消主线程的休眠方法，这样就达到了目的，具体实现在 RNSplashScreen类

发布APP之打包iOS应用

具体看这里

这里相对于原项目精简了许多功能，都是基础，会更加好懂一点，通过这个项目能对 RN 有一个基本的认知，方便后续深入开发

这是我引入的第三方依赖,在package.json里，自己动手过一遍项目的话建议先把库全引入进来

 "prop-types": "^15.6.2",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-check-box": "^2.1.0",
    "react-native-code-push": "^5.4.2",
    "react-native-scrollable-tab-view": "^0.8.0",
    "react-native-sortable-listview": "^0.2.8",
    "react-native-splash-screen": "^3.1.0",
    "react-native-tab-navigator": "^0.3.4",
    "react-navigation": "^2.9.3"

比如 npm i react-navigation --save

另外有很多细节的地方，这里说的比较粗糙，不会精确到每个点去说，具体需要自己跟着走一遍代码才能知道,中间应该会碰到不少问题，需要有点耐心，发现报错不要急躁，耐心去检查代码,善用Google,发现错误才能进步.....

React Native -- 项目实战复盘

项目结构分析

MyPage 模块里包括功能有

启动白屏问题

发布APP之打包iOS应用

猜你喜欢

热点阅读