以下均为近期学习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);
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码农,用起来真的很怪,门槛还是有的。不过抱着学习的态度,尝试一种新的技术,对我们码农自身还是很有好处的。