您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
     
   
 订阅
  捐助
React Native初探
 
409 次浏览     评价:  
 2018-1-12  
 
编辑推荐:
本文来自于cnblogs,文章篇幅教程,属于基础文章,从搭建环境到代码详细叙述介绍较为详细,对于初学者会有很大的帮助。

前言

很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情。

PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果。

事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一:

① 做UI快

② 还是有很多限制,不如原生Native

③ 入门简单,能让前端快速开发App

④ iOS&Android大部分代码通用

⑤ code-push能做热更新,但是用不好依旧坑

......

在得到一些信息后,可以看出,要用RN高效率的做出比较不错的App是有可能的,单看投入度与最初设计是否合理,而且现在关于React Native的各种文档是相当丰富的,所以这个阶段想切入RN可能是一个不错的选择。

带着试试不吃亏的想法,我们开始今天的学习,这里是一些比较优质的学习资料:

https://github.com/reactnativecn/react-native-guide

准备阶段

搭建开发环境

http://reactnative.cn/docs/0.36/getting-started.html

官方的例子其实写的很好了,我照着官方的例子能很好的跑起来,大家自己去看看吧

这里在运行时候要注意一下,我因为开启了FQ工具,一运行就crash,这里猜测是翻(科学上网法)墙工具对localhost造成了影响,导致不能读取文件,这个可能涉及到RN底层实现,我们后面深入了再去做研究,这里关闭FQ工具即可。

然后第二个问题,是http的图片展示不出来,这里折腾了很久,却发现后面的章节有了说明,app默认只支持https的链接,这里大家改下配置即可:

https://segmentfault.com/a/1190000002933776

RN中的js使用的是比较新的语法,这里也需要大家进行学习,我学习的感受是ES6提供了很多语法糖,但是有几个东西也要注意。

Class

JavaScript之前的继承全部是复写原型链模拟实现的,作为大型应用框架,继承是必不可少的,所以ES6直接将这块API化了,我这里写一个简单的demo:

1 class Animal {
2 constructor(name) {
3 this.name = name;
4 }
5 say() {
6 console.log('我是' + this.name);
7 }
8 }
9
10 class Person extends Animal {
11 say() {
12 console.log('我是人类');
13 super.say();
14 }
15 }
16
17 var p = new Person('叶小钗')
18 p.say();

1 /*
2 我是人类
3 我是叶小钗
4 */

Module

我们一般使用requireJS解决模块化的问题,在ES6里面提出了Module功能在官方解决了模块化的问题,这里优缺点不是我们考虑的重点,简单了解下语法,两个核心为:

① export

② import

ES6以一个文件为单位,一个文件可以多个输出,这里以RN的一个引用为例:

1 import React, { Component } from 'react';
2 import {
3 AppRegistry,
4 StyleSheet,
5 Text,
6 View
7 } from 'react-native';
8 import styles from './static/style/styles.js';

可以假想,这里一定会有一个react文件,并且里面可能是这个样式的:

export default class React......

expoet class Component ......

PS:一个文件只能有一个default

输出的default一定会出现,不使用大括号包裹,其余部分随意输出,这里与我们使用require或有不同,需要注意。

应该说ES6提供了很多语法糖,有人喜欢,有人不喜欢,这个看爱好使用吧,比如=>箭头函数。了解了以上关系,再配合ES6的一些文档,基本可以写RN的代码了。

城市列表

拆分目录

这里,我们做一个城市列表,真实的访问接口获取数据,然后渲染页面,看看做出来效果如何。

首先,我们初始化一个RN项目:

react-native init Citylist

然后使用Xcode打开iOS中的项目,编译运行:

1 import React, { Component } from 'react';
2 import {
3 AppRegistry,
4 StyleSheet,
5 Text,
6 View
7 } from 'react-native';
8
9 export default class Citylist 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.ios.js
18 </Text>
19 <Text style={styles.instructions}>
20 Press Cmd+R to reload,{'\n'}
21 Cmd+D or shake for dev menu
22 </Text>
23 </View>
24 );
25 }
26 }
27
28 const styles = StyleSheet.create({
29 container: {
30 flex: 1,
31 justifyContent: 'center',
32 alignItems: 'center',
33 backgroundColor: '#F5FCFF',
34 },
35 welcome: {
36 fontSize: 20,
37 textAlign: 'center',
38 margin: 10,
39 },
40 instructions: {
41 textAlign: 'center',
42 color: '#333333',
43 marginBottom: 5,
44 },
45 });
46
47 AppRegistry.registerComponent('Citylist', () => Citylist);

这里除了index.io.js,其他文件我们不必理睬,我们做的第一件事情是,将样式文件剥离出去,新建static文件夹,加入images和style,将样式文件移入style文件,新建style.js:

1 import {
2 StyleSheet
3 } from 'react-native';
4
5 export let styles = StyleSheet.create({
6 container: {
7 flex: 1,
8 justifyContent: 'center',
9 alignItems: 'center',
10 backgroundColor: '#F5FCFF',
11 },
12 welcome: {
13 fontSize: 20,
14 textAlign: 'center',
15 margin: 10,
16 },
17 instructions: {
18 textAlign: 'center',
19 color: '#333333',
20 marginBottom: 5,
21 },
22 });

然后首页代码再做一些改动:

1 import React, { Component } from 'react';
2 import {
3 AppRegistry,
4 Text,
5 View
6 } from 'react-native';
7
8 import {styles} from './static/style/style';
9
10
11 export default class Citylist extends Component {
12 render() {
13 return (
14 <View style={styles.container}>
15 <Text style={styles.welcome}>
16 Welcome to React Native!
17 </Text>
18 <Text style={styles.instructions}>
19 To get started, edit index.ios.js
20 </Text>
21 <Text style={styles.instructions}>
22 Press Cmd+R to reload,{'\n'}
23 Cmd+D or shake for dev menu
24 </Text>
25 </View>
26 );
27 }
28 }
29
30 AppRegistry.registerComponent('Citylist', () => Citylist);
复制代码

PS:这里有一个箭头函数

1 () => Citylist
2 //===>
3 function () {
4 return Citylist;
5 }

静态资源剥离后,我们先不处理其它的,我们来做数据请求。

数据请求

RN虽然内置了ajax库,但是一般推荐使用RN自带的Fetch,最简单的使用是:

fetch('https://mywebsite.com/mydata.json')

PS:我们在学习RN的时候,也是在学习神马方式是适合的,或者说熟悉使用合适的组件

请求一个接口是这样写的(使用promise):

1 fetch ('https ://apikuai.baidu.com/city/getstartcitys')
2 .then((response) => response.json())
3 .then((jsonData) => {
4 console.log(jsonData);
5 })
6 .catch((e) => {
7 console.log(e)
8 })

这里打开调试环境一看,输出了我们要的数据:

一般来说,我们需要对数据请求应该封装为一个底层库,这里只做一些简单改造,真实项目不会这样做:

1 export default class Citylist extends Component {
2 getdata(url, suc, err) {
3 return fetch(url)
4 .then((response) => response.json())
5 .then((data) => {
6 if(data.errno == 0) {
7 suc && suc(data.data)
8 }
9 })
10 .catch((e) => {
11 console.log(e)
12 });
13 }
14 render() {
15
16 this.getdata ('https://apikuai.baidu.com/ city/getstartcitys', function(data) {
17 s = ''
18 });
19
20 return (
21 <View style={styles.container}>
22 <Text style={styles.welcome}>
23 Welcome to React Native!
24 </Text>
25 <Text style={styles.instructions}>
26 To get started, edit index.ios.js
27 </Text>
28 <Text style={styles.instructions}>
29 Press Cmd+R to reload,{'\n'}
30 Cmd+D or shake for dev menu
31 </Text>
32 </View>
33 );
34 }
35 }

PS:这里的使用不一定正确,先完成功能再改进吧

我们取所有的城市cities,这个数据量很大,有1000多条记录,也可以测试下拖动效率了,这里为类加入构造函数,因为列表是可变的,暂时把列表数据归为state(react也不是太熟,如果有问题后续优化,先完成功能):

1 constructor(props) {
2 super(props);
3 this.state = {
4 cities: []
5 };
6 }