React Native学习小结

以下均为近期学习React Native的个人心得，并不完善，欢迎园友拍砖。

React Native是什么？

React Native是一个框架，一个中间层，通过这套框架我们可以完成IOS和Android的开发。

为什么选择React Native？

选择React Native是因为它确实能够解决我们的问题。

比较重要的两个特性：

1.跨平台效率高。通过js可以同时编写IOS和Android。

2.动态加载。服务端更新客户端代码与资源，很实用的技术。

用React Native就能完成开发任务吗？

虽然有一些React Native的项目已经上线了，但是只通过React Native来开发项目局限性还是很大。

React Native目前暴露的组件与API只能满足简单的开发任务。

若只需要注册页+登录也+列表页+详情页，那么React Native很好用，网络请求、UI视图交互、页面跳转均提供了很好的支持。

但是需要使用PackageManager,ActivityManager等组件的话，就需要通过React Native和Native混合开发了。

学会了React Native就可以开发IOS程序了吧？

如果是非常简单的需求，React Native应该可以满足。但复杂一些的需求还是需要借助Native丰富的接口来实现(React Native作为一个框架，提供Native所有的接口不太现实)。

了解了React Native的基本情况，接下来开始简单介绍基本开发知识。静态页面、交互页面、页面跳转、网络请求，基本可以理解React Native的使用了。Native模块调用也是关键部分，但官方文档描述的很清楚，依据文档进行Native编写与配置便可实现，就不介绍了。

静态页面

我们可以通过分析官方自带的demo来了解静态页面的基本内容。

 1 'use strict’;
 2 import React, {
 3   AppRegistry,
 4   Component,
 5   StyleSheet,
 6   Text,
 7   View
 8 } from 'react-native';
 9 class rnDemo extends Component {
10   render() {
11     return (
12       <View style={styles.container}>
13         <Text style={styles.welcome}>
14           Welcome to React Native!
15         </Text>
16         <Text style={styles.instructions}>
17           To get started, edit index.android.js
18         </Text>
19         <Text style={styles.instructions}>
20           Shake or press menu button for dev menu
21         </Text>
22       </View>
23     );
24   }
25 }
26 const styles = StyleSheet.create({
27   container: {
28     flex: 1,
29     justifyContent: 'center',
30     alignItems: 'center',
31     backgroundColor: '#F5FCFF',
32   },
33   welcome: {
34     fontSize: 20,
35     textAlign: 'center',
36     margin: 10,
37   },
38   instructions: {
39     textAlign: 'center',
40     color: '#333333',
41     marginBottom: 5,
42   },
43 });
44 AppRegistry.registerComponent('rnDemo', () => rnDemo);

代码很多是ES6语法，与早期React Native不太一样。不过对于Android开发来说应该更习惯这种类似编译语言的风格。

1行。表示是js的严格模式。

2行到8行。导入依赖，可以理解为java中import XX.react-native.React;和import XX.react-native.React.AppRegistry;这种。

9行。自定义组件，组件是React Native的基本元素，可以类比Activity。

10行到24行。render()方法，我的理解是渲染页面用的，里边的xml和layout类似，都是用来布局的。

26行到43行。通过StyleSheet.create()方法，生成布局所需的属性集合。在render()中的<View/>等添加style属性就可以了。类比android中每个View的属性，都是通过style来实现，我们创建的属性集合便是style集合。

44行。注册自定义组件。

交互页面

即在静态页面上添加事件处理，我们以点击事件为例。

1 <TouchableOpacity onPress={() => this.doNavigator()}>
2   <Text style={styles.welcome}>
3     Welcome to React Native new Page!
4   </Text>
5 </TouchableOpacity>

在android中我们通过setOnClickListener来实现点击事件的注册，而在React Native中，在相应的View外层套一个Touchable**的组件就可以实现这种效果了。点击事件的处理，是通过onPress属性来注册的，例子中点击后便会回调doNavigator()方法。

页面跳转

React Native的Android页面跳转与IOS页面跳转方式略有不同。最初按照IOS方式写页面跳转，报错，在Github上参考了几个Android项目，发现Android的跳转方式复杂一些。

不过页面跳转控制是在render()中，我有些迷惑，这个render()不仅具有页面渲染的功能，竟然也有页面跳转的处理，功能似乎并不是那么清晰。

抱着先会用后理解的态度，我们只能先学习如何进行跳转了。

首先要进行页面跳转控制器的配置，我是在第一个页面配置的，代码如下

 1 render() {
 2   return (
 3     <Navigator
 4       initialRoute={{id: 'Page'}}
 5       renderScene={this.actionTo}/>
 6   );
 7 },
 8 actionTo(route, navigator){
 9   switch (route.id) {
10     case 'Page':
11       return (<Page navigator={navigator}/>);
12     case 'Page2':
13       return (<Page2 navigator={navigator}/>);
14   }
15 }

Navigator就是页面跳转控制器，initialRoute指的是初始页面，renderScene是页面跳转时回调的方法，这里就是actionTo方法。

actionTo方法，便是通过route的属性，来跳转不同的页面，可以这样理解。

接下来需要页面跳转时，调用如下方法即可

1 this.props.navigator.push({
2   id: 'Page2',
3 });

这里只简单介绍了push操作，pop等操作查询相关api即可。

网络请求

网络请求部分可以使用XMLHttpRequest，也可以使用更加函数式的fetch，以fetch为例进行post请求

 1 fetch(url,{ 
 2       method: "POST",
 3       headers: {
 4         "Content-Type": "application/x-www-form-urlencoded"
 5       },
 6       body: “uid=puff2"})
 7     .then((response)=>response.text())
 8     .then((textData)=>{
 9       var json=eval('(' + textData + ')');
10       Toast.show("textData:"+textData,Toast.SHORT);
11       this.setState({code:textData});
12     })
13     .done();

post请求，添加formData时遇到了一些坑，最后只能通过例子中这种原始方式进行请求了。

至于response使用text()而不是json()来读取数据，是因为直接解析son()会有问题，所以采用text()+eval进行了json解析。

不知道是不是后台搭得不规范，但是Android中Retrofit+Gson却是可以的啊......

上述的内容，基本能够理解React Native的基本使用了，作为一个Android码农，用起来真的很怪，门槛还是有的。不过抱着学习的态度，尝试一种新的技术，对我们码农自身还是很有好处的。