React Native跨平台移动应用开发

转载自： 刘宗水的github

React Native简介

React Native是Facebook于2015年4月出品的一个革新性的跨平台移动应用开发框架，跨平台不是它最大的亮点，它背后的[React]才应该是它的神奇所在，也是它革新所在。
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验
官方文档：https://facebook.github.io/react-native/docs/getting-started.html
https://github.com/facebook/react-native
React： https://reactjs.org

React Native通信机制

执行 JavaScript 源码,方法调用流程。(ps: Objective-c)

React Native 实例

jsx 。JS 语言中嵌入了 HTML 和 CSS 的元素。这种被扩展的Javascript 语言称 jsx （语法）
JavaScript 内存中维护了一个 Virtual DOM , 与真实显示的DOM保持一一对应的关系。当界面发生变化时，得益于高效的 DOM Diff 算法，避免重新绘制 DOM。
组件。组件可以用好几种方式声明，可以是一个包含 render() 方法的类，也可以是一个简单的函数. 通过属性(props) 和 状态(state)传递数据。（控制器）

3.1 状态(state)。更新组件的 state，然后根据新的 state 重新渲染用户界面（不用操作DOM）。（属性，全局变量）

3.2 属性(props)。Props 是不可变的，子组件只能通过 props 来传递数据。（正向传值）

3.3 元素。普通的对象，构成的应用的最小单元。元素的事件处理和 DOM 元素类似

3.4 生命周期。

• componentWillMount 渲染前调用,在客户端也在服务端
• componentDidMount 第一次渲染后调用，只在客户端
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。
• componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

React Native 安装依赖

• node （version > 10）
• brew install node
• Watchman （快速捕捉文件的变化从而实现实时刷新）
• brew install watchman
• react-natvie-cli （命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务
• npm install -g yarn react-native-cli

React Native 创建新项目

• react-native init 项目名称

• 文件夹目录结构：

React Native 真机调试

确保开发设备和手机在同一个局域网，确保编译脚本正确检测到 IP 地址，摇晃手机，调出调试菜单。

3.1 Reload — 刷新页面

3.2 Deug JS Remotely — 启动 Chrome 调试应用

3.3 Enable Live Reload — 自动刷新，可以看到明显刷新效果

3.4 Enable Hot Reload — 热加载，基本看不出效果，类似局部刷新

3.5 Show inspector — 快速定位获取当前选中元素信息

3.6 Show Perf Monitor — 监控窗口。实时监控性能状态。