React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native。在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解。对于JS,可以看看阮一峰老师的《ECMAScript 6 入门》这篇文章。里面涉及很多 ES6 的新特性。我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记

1、环境搭建

环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-started.html#content

社区内容讲得很详细,大家跟着操作一步一步来即可,遇到问题,直接百度。也可以看看这篇文章:React Native 填坑指南 会教你如何把坑填平。

2、React Native 基础

先来看看一个实例,这个地址源码地址:示例教程:电影列表。之所以选择这个例子,是因为它包含了几乎所有的 react native入门基础知识。

import React, { Component } from "react";

import { Image, FlatList, StyleSheet, Text, View } from "react-native";

var REQUEST_URL =
"https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json"; export default class SampleAppMovies extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
loaded: false
};
// 在ES6中,如果在自定义的函数里使用了this关键字,则需要对其进行“绑定”操作,否则this的指向会变为空
// 像下面这行代码一样,在constructor中使用bind是其中一种做法(还有一些其他做法,如使用箭头函数等)
this.fetchData = this.fetchData.bind(this);
} componentDidMount() {
this.fetchData();
} fetchData() {
fetch(REQUEST_URL)
.then(response => response.json())
.then(responseData => {
// 注意,这里使用了this关键字,为了保证this在调用时仍然指向当前组件,我们需要对其进行“绑定”操作
this.setState({
data: this.state.data.concat(responseData.movies),
loaded: true
});
});
} render() {
if (!this.state.loaded) {
return this.renderLoadingView();
} return (
<FlatList
data={this.state.data}
renderItem={this.renderMovie}
style={styles.list}
/>
);
} renderLoadingView() {
return (
<View style={styles.container}>
<Text>Loading movies...</Text>
</View>
);
} renderMovie({ item }) {
// { item }是一种“解构”写法,请阅读ES2015语法的相关文档
// item也是FlatList中固定的参数名,请阅读FlatList的相关文档
return (
<View style={styles.container}>
<Image
source={{ uri: item.posters.thumbnail }}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.year}>{item.year}</Text>
</View>
</View>
);
}
} var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
rightContainer: {
flex: 1
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: "center"
},
year: {
textAlign: "center"
},
thumbnail: {
width: 53,
height: 81
},
list: {
paddingTop: 20,
backgroundColor: "#F5FCFF"
}
});

这个例子从电影数据库中取得最近正在上映的 25 部电影,并在一个 FlatList 中展示出来。

2.1 import

import React,{Component} from 'react';
// 导入‘react’文件里export的一个默认的组件,将其命名为React以及Component这个非默认组件

还有其他一些 import 的用法,具体含义如下:

    • import defaultcomponent form 'XXX'   导入 XXX 文件中的默认组件,命名为 defaultcomponent
    • import {a} from 'XXX'   导入 XXX 文件中的 a 组件

    • import {a as b} from 'XXX'   导入 XXX 文件中的a组件,并将其重命名为 b

    • import * as a from 'XXX'   导入 XXX 文件中的所有组件,并将其命名为 a,调用具体组件的方式为 a.b、a.c。。。但不包含默认组件

2.2 var 定义变量

在组件前面,定一个变量 REQUEST_URL 用于保存请求网址,。

2.3 export 语句

模块的功能有两个关键字: export 和 import。export 用于用户自定义模块。import用于输入其他模块的功能,同时创建命名空间(namespace),防止函数名冲突。

ES6允许将独立的JS文件作为模块,也就是说,允许一个 JavaScript 脚本文件调用另一个脚本文件。最简单的模块就是一个 JS 文件,里面使用 export 关键字输出变量。

    //profile.js
export var firstName = "Pandora";
export var lastName = "G.Dragon";
export var year = 1973; //export还有下面这种写法,两者是等价的
var firstName = "Pandora";
var lastName = "G.Dragon";
var year = 1973;
export({firstName, lastName, year});

使用 export 定义模块之后,其他 JS 文件就可以通过 import 关键字加载这个模块(文件)了。加载方式如下:

    import {firstName, lastName, year} from './profile';
function setHeader(element) {
element.textContent = firstName + '' + lastName;
}

上面的代码片段中,使用了 import 关键字接受一个对象——用“{ }”表示。里面指定了要从其他模块中导入的变量。大括号里面的变量名必须与被导入模块对外接口的名称相同。

2.4 Class 类

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的“类”改写,就是下面这样。

//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
} toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}

上面代码定义了一个“类”,可以看到里面有一个 constructor 方法,这就是构造方法,而 this 关键字则代表实例对象。也就是说,ES5 的构造函数 Point,对应 ES6 的 Point 类的构造方法。

Point 类除了构造方法,还定义了一个 toString 方法。注意,定义“类”的方法的时候,前面不需要加上 function 这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

Class 之间可以通过 extends 关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

class ColorPoint extends Point {}

上面代码定义了一个 ColorPoint 类,该类通过 extends 关键字,继承了 Point 类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个 Point 类。下面,我们在 ColorPoint 内部加上代码。

class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
} toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}

上面代码中,constructor 方法和 toString 方法之中,都出现了super 关键字,它在这里表示父类的构造函数,用来新建父类的 this 对象。

子类必须在 constructor 方法中调用 super 方法,否则新建实例时会报错。这是因为子类没有自己的 this 对象,而是继承父类的 this 对象,然后对其进行加工。如果不调用super方法,子类就得不到 this 对象。

2.5 Props(属性)

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

以常见的基础组件 Image 为例,在创建一个图片时,可以传入一个名为 source 的 prop 来指定要显示的图片的地址,以及使用名为 style 的 prop 来控制其尺寸。

import React, { Component } from 'react';
import { Image } from 'react-native'; export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}

2.6 state

props 是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用 state。

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为 props(属性)。

一般来说,你需要在 constructor 中初始化 state(译注:这是 ES6 的写法,早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state,这一做法会逐渐被淘汰),然后在需要修改时调用 setState方法。

提示一些初学者应该牢记的要点:

  • 一切界面变化都是状态 state 变化

  • state的修改必须通过 setState()方法

    • this.state.likes = 100; // 这样的直接赋值修改无效!

    • setState 是一个 merge 合并操作,只修改指定属性,不影响其他属性

    • setState 是异步操作,修改不会马上生效

2.7 react native 生命周期

组件的生命周期方法对应着组件的不同生命阶段,通常我们分为三个阶段:组件初始化及挂载阶段、组件运行期阶段及组件卸载阶段。

  • 初始化及挂载阶段

一、这是组件类的构造函数,通常在此初始化 state 数据模型。

constructor(props) {
super(props);
this.state = {
//key : value
};
}

二、表示组件将要加载到虚拟 DOM,在 render 方法之前执行,整个生命周期只执行一次。

componentWillMount() {
}

三、表示组件已经加载到虚拟 DOM,在 render 方法之后执行,整个生命周期只执行一次。通常在该方法中完成异步网络请求或者集成其他 JavaScript库。

componentDidMount() {
}
  • 运行期阶段

一、在组件接收到其父组件传递的 props 的时候执行,参数为父组件传递的props。在组件的整个生命周期可以多次执行。通常在此方法接收新的props值,重新设置 state

componentWillReceiveProps(nextProps) {
this.setState({
//key : value
});
}

二、在 componentWillReceiveProps(nextProps) 执行之后立刻执行;或者在state更改之后立刻执行。该方法包含两个参数,分别是 props和 state。该方法在组件的整个生命周期可以多次执行。如果该方法返回 false,则 componentWillUpdate(nextProps, nextState) 及其之后执行的方法都不会执行,组件则不会进行重新渲染。

shouldComponentUpdate(nextProps, nextState) {
return true;
}

二、在 shouldComponentUpdate(nextProps, nextState) 函数执行完毕之后立刻调用,该方法包含两个参数,分别是 props 和 staterender() 函数执行之前调用。该方法在组件的整个生命周期可以多次执行。

componentWillUpdate(nextProps, nextState) {

}

三、在 render() 方法执行之后立刻调用。该方法包含两个参数,分别是 props 和 state。该方法在组件的整个生命周期可以多次执行。

componentDidUpdate(preProps, preState) {

}

四、render 方法用于渲染组件。在初始化阶段和运行期阶段都会执行。

render() {
return(
<View/>
);
}
  • 卸载阶段

一、在组件由虚拟 DOM 卸载的时候调用。

componentWillUnmount() {
}

2.8 fetch

fetch,说白了,就是 XMLHttpRequest 的一种替代方案。如果有人问你,除了 Ajax 获取后台数据之外,还有没有其他的替代方案?答案是还可以使用一种更优的解决方案 fetch。

到现在为止,fetch 的支持性还不是很好,但是在谷歌浏览器中已经支持了fetch。fetch 挂在在 BOM 中,可以直接在谷歌浏览器中使用。

查看 fetch 的支持情况:fetch的支持情况

fetch 方法会返回一个 Promise,这种模式可以简化异步风格的代码。如果你想了解 promise 的含义,可以参考文章 :手把手教你实现一个完整的 Promise 。带你了解 promise 的本质内核。

下面我们来写第一个 fetch 获取后端数据的例子:

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
.then((res)=>{
return res.text() // res.text()是一个Promise对象
})
.then((res)=>{
console.log(res) // res是最终的结果
})

是不是很简单?再来看看 get 和 post 方法的使用:

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中写上传递的参数
method: 'GET'
}) /* post 方法,把前面的 get 注释即可
fetch('https://www.baidu.com/search/error.html', {
method: 'POST',
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
})
*/
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})

React Native 中已经内置了 XMLHttpRequest API (也就是俗称的 ajax)。一些基于 XMLHttpRequest 封装的第三方库也可以使用,例如 frisbee 或是 axios 等。但注意不能使用 jQuery,因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西(所以也不是所有 web 中的 ajax 库都可以直接使用)。

2.9 样式

style 的定义方式:

  • 1、直接在 render()函数中定义
//todo 设置样式一,直接在render中定义样式
var mStyle = {color:'red',fontSize:34};
return<Text style={mStyle}> https://github.com/93Laer </Text>
// or 类似于安卓中的匿名内部内
// return<Text style={{color:'red',fontSize:34}}> https://github.com/93Laer </Text>
  • 2、方式二,通过 StyleSheet 创建 style,测试多个 style,以哪个为准
// 创建样式
const styles = StyleSheet.create({
bigblue:{
color:'blue',
fontSize:34,
fontWeight:'bold'
},
red:{
color:'red',
fontSize:14
}
});
// 使用样式
//todo 设置样式二,通过StyleSheet创建样式
return<Text style={styles.bigblue}> https ://github.com/93Laer </Text>

直接在组件中传入多个 style 对象,最后显示的效果就不展示了,在结尾直接给出结论

//这里通过多种方式定义style,主要是告诉读者定义style的多种方式
var mStyle = {color:'red',fontSize:34};
return<Text style={[mStyle,{color: 'blue',fontSize:20}]}> https ://github.com/93Laer </Text>

通过 StyleSheet 创建多个 style,并传入

 return<Text style={[styles.bigblue,styles.red]}> https ://github.com/93Laer </Text>
结论:当设置多个 style 时以最后一个为准,可理解为最后一个将之前的样式覆盖了。也可理解为,style 从 styles 数组中依次拿出 style,并赋值给自己,所以最后一次赋值就会显示效果

到此,关于 react native 入门的基础知识就讲解完毕了。

上一篇:Linux命令应用大词典-第7章 字符串、文件和命令查找


下一篇:vtk第一个程序