RN 开发流程简述

一. RN简介

1. RN背景及由来

早期开发一款Android, IOS App 需要Android, ios 两个团队。同时两个平台/终端需要两套代码，复用率及成本比较高。传统方式开发的Android, ios 无法实现动态更新， 每次更新都需要响应APP应用市场上传，过程复杂还需要等待app审核。如果审核还没通过，新的版本需求来了就造成了非常尴尬的场景。

RN特点： 跨平台（android, ios）, 低投入高回报(一次学习可以同时开发android,ios应用)，代码复用率高(两个平台代码基本一致，通用一套) 性能高（并发允许在webkit浏览器引擎，而是自己的渲染引擎，性能比webview + h5性能高很多）， 支持动态更新(code push 或服务器等动态更新)。

二. RN开发环境介绍

1. Window环境介绍

• node 环境安装
• react-native 安装
  npm install -g react-native-cli
• androidStudio 用于开发android的开发工具
  通过google提供的中文域名： https://developer.android.google.cn/index.html 下载安装

至此环境准备已完成。

初始化及使用

(1) eact-native init FirsApp 来初始化一个RN自定义名为FirsApp的项目

(2) 运行一个rn/android 项目 (首先要确定已运行了一个模拟器/或者有一个连接到电脑的android设备)
- 通过命令启动RN中的android项目
run react-native run android （运行rn中的android项目）
运行后会编译并安装到模拟器
- 通过androidStudio 启动RN中的android项目

二. RN项目调试

1. 调试方式Developer Menu

三. React/ES6-9基础

1. React 基础

(1) React 生命周期
(2) React： Props, State（组件自身私有状态）, setState(更新组件自身状态)， ref；

基础知识不再补充，自行参考官网

2. ES6-9 基础

基础知识不再补充， 自行参考官网

三. React-Native 布局

1. 基础知识点

React Native 中的布局方式FlexBox. 即: 在React Native 中布局采用的是FlexBox（弹性框）进行布局。
FlexBox 提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，并不是所有浏览器都支持FlexBox。 但在做React Native开发时大可不必担心FlexBox的兼容性问题， 因为React Native 选择用FlexBox布局，那么React Native 对其的支持自然会做的很好。

像素无关

在React Native中尺寸是没有单位的， 它代表了设备独立像素。

<View style={{width: 100, height: 100, margin: 40}}>
     <Text style={{fontSize:16, margin: 20}}>尺寸</Text>
</View>

上述代码, 运行在Android上时， View的长和宽被解释成： 100dp 100dp单位是 dp, 字体被解释成16sp 单位是

React Nativ 中的FlexBox 和 Web CSS上FlexBox的不同之处

其余相关CSS3 flex 向支持，自行参考官网。