STAY HUNGRY , STAY FOOLISH.

求知若饥，虚心若愚。

| JavaScript, React        浏览:

React Native基础知识

**《React Native搭建之旅》**简单的介绍了React Native，本文主要对React Native进行更细致的基础讲解。

1.什么是React Native？（以下简称RN）

引用facebook官方的话：
Learn once, write anywhere: Build mobile apps with React
一次学习，随处开发：用React创建移动App。
特点如下：
1.Build native mobile apps using JavScript and React.
意思是说能用JavaScript和React来创建原生App。
2.A React Native app is a real mobile app.
意思是说一个React Native App是一个真的移动App，并非Hybrid 混合App。
3.Don't waste time recompiling.
意思是说不需要花费编译的时间，即可实施热更新看页面效果。
4.Use native code when you need to
意思是说当你需要的时候，可直接使用原生代码。

2.RN运行环境及搭建技巧

当你想下载npm包时，网速不给力的时候，可以设置npm镜像，试试以下命令：

1
2
 npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

或者可以使用yarn命令，
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。

1
npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

1
2
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果你看到EACCES: permission denied这样的权限报错，请修复/usr/local目录的所有权限，弄成最高：

1
sudo chown -R `whoami` /usr/local

当你成功运行React Native环境后，可以执行以下命令启动Android或IOS模拟器：

1
2
3
4
5
// 运行Android模拟器，模拟器可选Genymotion
react-native run-android

// 运行IOS模拟器，Simulator
react-native run-ios

注意：在运行run-android命令前，可使用以下命令：

1
2
3
4
5
6
7
8
// 打开SDK Manager
android

// 打开Android自带模拟器
android avd

// 查看Andorid设备是否连接
adb devices

打开调试页面或刷新，可使用以下按键：

1
2
3
4
5
6
7
8
9
// 打开Android调试页面
command+M键
// 刷新Android页面
双击R键

// 打开IOS调试页面
command+D键
// 刷新IOS页面
command+R键

3.RN里的Flexbox布局

与CSS的Flexbox布局有以下区别：
1.默认为Flexbox布局，无需使用display:flex里声明。
2.属性名称采用“驼峰”方式，比如：flexDirection。
3.flexDirection默认为column，主轴垂直向上。
4.alignItems默认为stretch，而不是flex-start。
5.flex只能为一个数字，不支持order属性。

一般来说，使用flexDirection、alignItems和justifyContent三个样式属性就已经能满足大多数布局需求。
除此外，还有：flexWrap、flex、alignSelf。

4.RN里的样式和标签

与传统CSS样式相比，写法上差异还是比较大：

1
2
3
4
5
6
7
8
9
10
11
/*CSS样式*/
.label {
  margin-top:10px;
}
.text {}

/*RN样式*/
label: {
  marginTop: 10,
},
text: {}

与传统的HTML标签相比，写法上差异还是很大：

1
2
3
4
5
6
7
/*HTML标签*/
<span class=“label”>Hello</span>

/*RN标签*/
<View style={styles.label}>
  <Text style={styles.text}>Hello</Text>
</View>

注意：在RN来不能使用HTML标签，只能使用内置的组件及自定义组件。

前面讲解关于React Native方面的知识，下面会讲解React相关的知识。因为React Native指用React创建移动App，自然要深入学习React。
React Native中没有DOM的概念，只有组件的概念，所以我们在React中使用的HTML标签以及DOM的操作是不起作用的，但是组件的生命周期、JSX的语法、事件绑定、自定义属性等，在RN和React中是一样的。

5.React的JSX及传参、属性、样式、事件等

JSX是JS的语法扩展，React用它描述UI。
其特点：
1.JSX是JS表达式，其值为React Element对象
2.JSX本质就是实现代码的转换，充当一个解析器。
3.React Element只有渲染出来才可见，该工作有React DOM负责。

请注意，下面讲解的是React的知识点，并非React Native：
1.转换解析：

1
2
3
<h3>输入</h3>
//转换成，返回一个ReactElement对象
React.createElement(“h3”,null,”输入”)

2.执行JavaScript表达式

1
2
3
4
let msg=“Hello”;
<h3>{msg}</h3>
//转换成
React.createElement(“h3”,null,msg)

3.属性

1
2
3
<h3 title=“Hello”>{this.props.title}</h3> 
//转换成：
React.createElement(“h3”,{ title:”Hello” },”Hello”)

4.延展属性

1
2
3
4
5
6
7
let props={
  title:“Hello”,
  age:“20”,
};
<h3 {…props} title=“World”>你好</h3>
//转换成：
React.createElement(“h3”,React.__spread({},props,{title:”World”}),”你好”)

5.自定义属性（data-开头的自定义属性，可渲染到页面）

6.显示HTML
需借助一个属性_html：

1
<div>{{_html“<h3>你好</h3>” }}</div>

7.样式的使用
style属性 js对象
外层{} JSX语法 内层{}是JavaScript对象

1
<div style={{ backgroundColor:"red" }}>Hello</div>

8.事件绑定
注意：onClick 调用bind方式（设定作用域，要传递的参数）

1
<button onClick={this.add.bind(this,'你好')}>按钮</button>

6.React的方法

React的核心思想是组件化，维护自己的状态和UI，实现自动重新渲染。
多个组件组成了一个ReactJS应用。
React、ReactDOM是全局对象，React方法包含顶层API与组件API。
顶层API有：

1
2
3
4
5
6
7
8
9
10
11
12
// 1.创建元素的方法
React.createElement

// 2.创建组件类的方法 
// ES5语法 已过时
React.createClass

// ES6语法
class 组件名 extends React.Component { … }

// 3.将指定组件渲染到指定DOM节点
ReactDOM.render

组件API有：

1
2
3
4
5
// 返回组件的内部结构
render()

// 生命周期，方法很多，请看下节
...

7.React组件的生命周期

1.创建阶段（初始化props）

1
2
3
4
5
// ES5 已过时
getDefaultProps()

// ES6:用static来声明
static defaultProps = {...};

多说一句，props属性可用来父子间传递参数用的。

2.实例化阶段（ReactDOM.render调用后）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1.初始化state

// ES5 已过时
getInitialState()

// ES6 constructor()
constructor(...args) {
  super(...args);
  this.state = {...};
}

// 2.组件渲染前 一般业务逻辑放这里
componentWillMount()

// 3.组件渲染
render()

// 4.组件渲染完成后
componentDidMount()

也多说几句，state:组件的属性，主要是用来存储自身需要的数据，每次数据的更新都是通过修改state属性的值，ReactJS内部会监听state属性的变化，一旦发生变化的话，就会主动触发组件的render方法来更新虚拟DOM结构。

虚拟DOM：将真实的DOM结构映射成一个JSON数据结构。

1
2
3
4
ReactDOM.render(
  <MyTitle/>,//虚拟DOM
  document.getElementById('example')//真实DOM
);

3.更新阶段（state有修改的时候）

当使用this.setState方法来完成对state的修改时：

1
2
3
4
5
6
7
8
9
10
11
// 1.组件接收到修改
componentWillReceiveProps()

// 2.组件是否更新
shouldComponentUpdate()

// 3.组件重新渲染
render()

// 4.组件渲染完成后
componentDidUpdate()

4.销毁阶段(清空state的时候)

1
2
// 组件销毁
componentWillUnmount()

8.React组件通信

React组件关系是一层套一层，DOM结构，组件结构比较清晰。

1
2
3
4
5
6
7
8
9
10
// 1.父组件与子组件通信
// a.子组件如何调用父组件
this.props

// b.父组件如何调用子组件
// 首先用属性ref给子组件取个名字
this.refs.名字.getDOMNode().

// 2.组件与组件通信
//使用Flux架构，可使用Redux或MobX

9.RN Android打包发布

启动成功后，可直接在浏览器访问：http://localhsot:8081/index.android.bundle?platform=android；
当应用启动运行的时候，会自动拉取这个bundle文件，该文件里存放的是应用的全部逻辑代码，在源目录中其实并不存在这个文件，事实上，这个地址只是一个请求地址，并非真正的静态资源文件，是通过包服务器packager通过动态分析index.android.js中的依赖，并对其进行合并得到的，而且该服务允许代码实时渲染。

打Andorid正式包步骤：

1.生成一个签名密钥

1
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

最后它会生成一个叫做my-release-key.keystore的密钥库文件。

2.设置gradle变量

a. 把my-release-key.keystore文件放到你工程中的android/app文件夹下。
b.编辑~/.gradle/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）

1
2
3
4
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

3.添加签名到项目的gradle配置文件

编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

注意：可以启用Proguard代码混淆来缩小APK文件的大小。（可选）
Proguard是一个Java字节码混淆压缩工具，它可以移除掉React Native Java（和它的依赖库中）中没有被使用到的部分，最终有效的减少APK的大小。

1
2
//找到enableProguardInReleaseBuilds,将值变为true
def enableProguardInReleaseBuilds = true

4.生成发行APK包

只需在终端中运行以下命令：

1
2
3
4
//到andorid目录
cd android 
//执行assembleRelease命令
./gradlew assembleRelease

Gradle的assembleRelease命令会把所有用到的JavaScript代码都打包到一起，然后内置到APK包中。

生成的APK文件位于android/app/build/outputs/apk/app-release.apk，它已经可以用来发布了。

5.测试应用的发行版本

将生成的APK包，拷贝到Android设备，安装即可。
安装成功后，可以通过GenSignature来检查是否是签名包。
找到项目目录下的android/app/build.gradle，找到如下代码：

1
2
3
4
5
6
7
8
9
10
defaultConfig {
    applicationId "com.awesomeproject"
    minSdkVersion 16
    targetSdkVersion 22
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}

拷贝applicationId的值进行验证即可。

失败如下：
success

成功如下：
fail

每天进步一点点！