Blog Logo

React Native基础知识

写于2017-03-26 03:15 阅读耗时11分钟 阅读量

**《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镜像，试试以下命令：

 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模块的下载。

npm install -g yarn react-native-cli

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

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目录的所有权限，弄成最高：

sudo chown -R `whoami` /usr/local

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

// 运行Android模拟器，模拟器可选Genymotion
react-native run-android

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

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

// 打开SDK Manager
android

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

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

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

// 打开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样式相比，写法上差异还是比较大：

/*CSS样式*/
.label {
  margin-top:10px;
}
.text {}

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

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

/*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.转换解析：

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

2.执行JavaScript表达式

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

3.属性

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

4.延展属性

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

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

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

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

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

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

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

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

6.React的方法

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

// 1.创建元素的方法
React.createElement

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

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

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

组件API有：

// 返回组件的内部结构
render()

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

7.React组件的生命周期

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

// ES5 已过时
getDefaultProps()

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

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

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

// 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数据结构。

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

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

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

// 1.组件接收到修改
componentWillReceiveProps()

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

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

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

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

// 组件销毁
componentWillUnmount()

8.React组件通信

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

// 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.生成一个签名密钥

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（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）

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，添加如下的签名配置：

...
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的大小。

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

4.生成发行APK包

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

//到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，找到如下代码：

defaultConfig {
    applicationId "com.awesomeproject"
    minSdkVersion 16
    targetSdkVersion 22
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}

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

失败如下： success

成功如下： fail

每天进步一点点！

Headshot of Maxi Ferreira

怀着敬畏之心，做好每一件事。