reactnative入门基础知识总结(代码片段)

关键词：

中秋在家闲得无事，想着做点啥，后来想想，为啥不学学 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（属性）

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 生命周期

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

componentWillMount() 

componentDidMount() 

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

shouldComponentUpdate(nextProps, nextState) 
  return true;

componentWillUpdate(nextProps, nextState) 

componentDidUpdate(preProps, preState) 

render() 
  return(
    <View/>
  );

componentWillUnmount() 

 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 样式

//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>

// 创建样式
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的多种方式
 var mStyle = color:‘red‘,fontSize:34;
 return<Text style=[mStyle,color: ‘blue‘,fontSize:20]> https ://github.com/93Laer </Text>

 return<Text style=[styles.bigblue,styles.red]> https ://github.com/93Laer </Text>

结论：当设置多个 style 时以最后一个为准，可理解为最后一个将之前的样式覆盖了。也可理解为，style 从 styles 数组中依次拿出 style，并赋值给自己，所以最后一次赋值就会显示效果

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

reactnative入门基础(代码片段)

一、前言ReactNative是Facebook推出的使用React和平台原生功能来构建Android和iOS应用的开源移动跨平台框架;-视图（Views）和移动开发在Android和iOS移动应用中，一个视图是UI的基本组成部分：屏幕上的一个小矩形元素、... 查看详情

reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学... 查看详情

reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学... 查看详情

reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学... 查看详情

c++基础入门知识整理与总结(代码片段)

C++基础入门知识整理与总结一.C++基础C++关键字命名空间C++输入和输出缺省参数函数重载函数重载的概念extern“C”引用引用的概念引用特性常引用使用场景传值、传引用效率比较引用和指针的区别内联函... 查看详情

c++基础入门知识整理与总结(代码片段)

C++基础入门知识整理与总结一.C++基础C++关键字命名空间C++输入和输出缺省参数函数重载函数重载的概念extern“C”引用引用的概念引用特性常引用使用场景传值、传引用效率比较引用和指针的区别内联函... 查看详情

vue基础知识总结1vue入门(代码片段)

vue所有基础语法部分 插值操作 v-once        v-html        v-test          v-pre          v-cloak                可以使用v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML      ... 查看详情

python入门知识点总结(代码片段)

心态准备编程是一门技术，也可以说是一门手艺。如同书法、绘画、乐器、雕刻等，技艺纯熟的背后肯定付出了长时间的反复练习。编程的世界浩瀚无边，请保持一课敬畏的心态去学习，认真对待写下的每一行代码，甚至每一个... 查看详情

reactnative开发入门

目录：一、前言二、什么是ReactNative三、开发环境搭建四、预备知识五、最简单的ReactNative小程序六、总结七、参考资料 一、前言虽然只是简单的了解了一下React的皮毛，但是对ReactNative的学习就轻松了好多。所以在学习ReactNa... 查看详情

vue入门基础教程之经验总结篇（小白入门必备）|建议收藏(代码片段)

目录一、vue组件的三个API：prop、event、slot二、Vue生命周期中的钩子函数三、自定义指令四、mixins基础概况五、修饰符一、vue组件的三个API：prop、event、slotprop定义了这个组件有哪些可配置的属性，组件的核心功能也都... 查看详情

netty入门到精通，jquery基础知识总结（超级详细(代码片段)

整体而言，我觉得jQuery采用的是总–分的结构，虽然JavaScript有着作用域的提升机制，但是9000多行的代码为了相互的关联性，并不代表所有的变量都要定义在最顶部。在jQuery中，只有全局都会用到的变量、正则... 查看详情

vue知识体系总结vue入门（筑基灵液篇）(代码片段)

目录一、前言二、百度百科三、Vue安装四、Vue入门语法1、使用Vue实现helloworld2、vue列表展示3、实现简单计数器五、vue中的MVVM六、理解vue生命周期1、生命周期代码实例2、生命周期3、分析生命周期相关方法的执行时机七、动态绑... 查看详情

vue入门:vue基础(代码片段)

Vue入门(1):Vue基础​参考教程：B站黑马程序员Vue4小时教程文章目录Vue入门(1):Vue基础一.Vue简介二.HelloVue第一个Vue程序三.el属性:设置挂载点Vue实例作用的范围Vue实例支持的选择器Vue实例支持的标签总结四.data属性:数据对象总结... 查看详情

我入门python后总结的基础教程(代码片段)

先唠叨几句学习Python有几周了，也写了2个小项目来解决自己的实际需求。简单记录一下，供自己备忘，也供后来者参考。0.0)我为什么选择Python我之前使用Swift+Vapor开发了iPic(图床工具)的后端服务，遇到很多问... 查看详情

reactnative入门——入门小结(代码片段)

1.js跳转Activity后，按home键再切回应用白屏：解决方案：修改MainActivity或目标Activity启动方式，总之不能全部为SingleTask。2.代码报错修改后无法链接nodejs服务了？解决方案：尝试在nodejs服务框内按Ctrl+V。3.... 查看详情

reactnative入门——入门小结(代码片段)

1.js跳转Activity后，按home键再切回应用白屏：解决方案：修改MainActivity或目标Activity启动方式，总之不能全部为SingleTask。2.代码报错修改后无法链接nodejs服务了？解决方案：尝试在nodejs服务框内按Ctrl+V。3.... 查看详情

vue知识体系总结vue入门（风之极陨杀）(代码片段)

在进行一门新的语言学习时，基础是最重要的点，只要你get到它，学习新技术只是时间的问题。一、vue常用标签简介1、v-for和@click实现点击赋予红色效果<!DOCTYPEhtml><htmllang="en"><head><metacharset... 查看详情

reactnative在原生项目中集成之坑点总结(代码片段)

...不过的方法就是在现有的项目基础上进行改良，集成ReactNative框架ÿ 查看详情