React-native基础介绍

JSX语法

如果仅仅是开发react/react-native，个人觉得，没必要专门学习什么是jsx，我们只需要它的一些基本的知识就足够了。

jsx语法，一定要记住这样的一句话，它是把HTML模板和JavaScript进行混写的一种语法风格。使用<>来写HTML，使用{}来写JavaScript。jsx的基本语法规则就是：遇到HTML标签（以 < 开头），就用HTML规则解析，遇到代码块（以 { 开头）就用JavaScript规则解析。

比如，下面这样就是JSX语法：

<div>{this.props.title}</div>

其中，<>中表示的都是标签，而{}中表示的都是js。

关于jsx语法，一般在模板中可以插入变量、数组，如果是数组，则直接会展开数组的成员。

模板中也可以插入函数，这个函数的返回值一般是一个变量、数组、或者是模板。

React-native的基础开发目录

通过执行react-native命令行工具实现

react-native init App//构建这样的一个项目目录cd App//进入到这个目录中react-native run-android//启动这个项目

其中有两个入口，一个是index.android.js，另一个是index.ios.js。分别代表着android应用入口和ios应用入口。你想实现什么类型的App，就在什么样的入口文件编写代码。

//我们自己的代码，就写在src的目录下。

一个最简单的hello world的 rn界面。

//index.android.jsimport React, { Component } from 'react';import { AppRegistry,View,Text } from 'react-native';//class生成一个继承自Component的组件，叫App。class App extends Component{    render(){        return (           <Text>Hello world!</Text>                )    }}AppRegistry.registerComponent('App',()=>App);//注册一个名字叫App的项目

如果这个示例让你看起来陌生，那我觉得你应该了解一些ES6相关的知识。它有许多的新特性，如这个示例中的 import、from、class、extends、以及 ()=>{}等等。

ES6相关的知识：ES6基本介绍

这里的 return 在一般函数中，会return一个变量，可以在JSX语法中，就能return一个模板。也就是 JavaScript 中嵌入HTML。

在web界面中，我们的HTML是

或者 等标签，这里的 是 react-native 的原生组件。

样式

在 web 网页中，样式是使用 css 文件，使用 class、id 等等的选择器来写样式。（也有内联样式）。

在 react 中，它也是使用 className 的方式或者 对象 的方式来写样式。

在 react-native 中，样式是使用 JavaScript 对象来表示的。

//web<div class='container'></div>.container{    width:100px;    height:100px;}//react<div className="container"></div>.container{    width:100px;    height:100px;}//react-native<View style={style.container}></View>const styles = StyleSheet.create({    container:{        width:100,        height:100    }});

内联样式的写法：（针对react和react-native）

<TextInput    style={{borderRadius:Env.font.base*15}}    placeholder='搜索'    underlineColorAndroid="transparent"    onChangeText={(text)=>this.onChangeEvent(text)}/>

这个是react（包括react-native）的内联样式的写法，可以看到，有两个{ }，其中外层的{ }代表JSX语法，而内层的{ } 代表的是对象。这就是为什么在上面的样式中，可以写成 style={ styles.container } 的方式。

我们知道，在JSX语法中，{ }中可以包含一个变量，这个变量也可以是个数组，而当我们想给react / react-native 添加多个 ‘class’或者‘样式对象’时，我们可以使用数组的方式，例如：

<Text style={[obj,{color: 'red'}]}>{item.carNumber}</Text>

其中：obj以及{ color: ‘red’ } 都代表样式对象。

item.carNumber 代表JSX语法，模板中嵌入的变量。

state以及props

react中的一对非常重要的概念就是 state 和 props。
<1>state:
先看一个 state 的示例：

import React, { Component } from 'react';import { AppRegistry,View,Text } from 'react-native';//class生成一个继承自Component的组件，叫App。class App extends Component{    constructor(props){        super(props);        this.state = {            isShow:true        }    }    render(){        return (            <View>                 <TouchableOpacity onPress={()=>this.setState({isShow:!this.state.isShow})}>                       <Text>toggle<Text>                 </TouchableOpacity>                 {                        this.state.isShow ? <Text>Hello world!</Text> : null                 }            </View>        )    }}AppRegistry.registerComponent('App',()=>App);

这个demo的功能就是：点击toggle按钮，进行切换是否展示 hello world。

我默认大家都是新手，建议这个示例自己动手敲 3 遍以上。可以说，这个是理解 react-native 的基础和核心内容非常重要的一个示例，不要嫌它简单。

state：翻译成中文叫做“状态”，什么是“状态”，状态代表了一个事物，在某些时刻是这样的，在某些时刻是那样的。所以，“状态”它包含的一个重要属性就是—可以改变。当我改变了“状态”，页面的展示也就改变了。

上面的三目运算符 this.state.isShow ? hello world! : null 表示：如果我的“状态”isShow为true时，展示hello world，如果为 false 时，不展示任何东西。

<2>props:

props又是什么？直接看一个示例:

mport React, { Component } from 'react';import { AppRegistry,View,Text } from 'react-native';//class生成一个继承自Component的组件，叫App。class App extends Component{    constructor(props){        super(props);        this.state = {            isShow:true        }    }    render(){        return (            <View>                 <Child title='mapbar_front'/>            </View>        )    }}class Child extends Component{    render(){       return <Text>hello,{this.props.title}</Text>    }}AppRegistry.registerComponent('App',()=>App);

这个界面最终会展示：hello，mapbar_front

理解props，必须要知道的一个概念是父组件和子组件。

props：翻译成汉语就是“属性”，属性的一大特点就是代表某个事物固定的，稳定的东西。它所包含的另一层含义就是–不可改变。

<3>来源：

props的来源：一般是父组件。多用于传值或者响应事件。

state的来源：就是自身，但是可以把 props的值赋值给state。

虽然，我们自己不用父组件传值，直接申明一个this.props.title = ‘hello’,可是我们想一想，这样有什么用？为什么不用this.state.title呢？

开发react项目的一个固有思维就是—props就是用来父子组件相互通信用的。state就是用来保持界面状态的。其他的一切操作都是费操作，或者不规范的操作。

this.setState()函数。

如何改变state？从而使得页面发生改变？

在react的设计中，this.setState()就是用来做这个事情的。它的参数是一个对象，用来给 state 赋值使用。

例如，上面的示例中，我们通过onPress事件，也就是web页面的onClick事件，对state进行改变。改变的值是对this.state.isShow进行取反操作。

基本语法如下：

this.setState({    key:value});

其中key就是在constructor中申明的state，比如上面的isShow。

组件生命周期

组件的生命周期如下：除了常用的几个，其他我们只需要明白他们的意思就行，什么时候执行了哪个生命后期函数。
constructor()、componentDidMount()、componentWillUnMount()、render()这四个是经常使用的生命周期函数。）

constructor() //构造函数，比较常见的用法是，在这个函数中设定 state 。
componentWillMount() //进行一些业务的初始化的东西。

componentDidMount()//组件已经加载完成，在这个中可以进行ajax请求相关的异步操作。

render()//界面渲染，绝对不能进行setState操作

componentWillReceiveProps()//可调用this.setState()更新你的组件状态

shouldComponentUpdate()//默认情况下这个函数永远返回true保证数据变化时候UI同步更新

componentWillUpdate()//做一些更新界面之前要做的东西

componentDidUpdate()//组件更新完毕，执行该方法

componentWillUnMount()//组件卸载前，通常的用法的对某些定时器的清除。

条件渲染和列表渲染

条件渲染和列表渲染是单页面应用最常见的需求，不同的框架有不同的实现方式。比如，在angular中，使用 ng-if 来实现条件渲染。使用 ng-for 实现列表渲染。

在 react 中，是通过它自己的方式来实现条件渲染和列表渲染。这种方式是由 react 自身的特性所决定。因为JSX语法的特性，它可以使用三木运算的方式实现条件渲染，使用数组的方式实现列表渲染。

import React, { Component } from 'react';import { AppRegistry,View,Text } from 'react-native';//class生成一个继承自Component的组件，叫App。class App extends Component{    constructor(props){        super(props);        this.state = {            isShow:true，            list:['China','USA','Jpan']        }    }    render(){        return (            <View>                 { this.state.isShow?<Text>show is true</Text>: <Text>show is false</Text>}                 {                         this.state.list.map((item,index) => <Text key={index}>item</Text>)                 }            </View>        )    }}AppRegistry.registerComponent('App',()=>App);

其中，第一个{ } 中表示条件渲染，第二个{ } 中表示列表渲染。

网络请求

在一般的web网页中，使用ajax进行数据请求，web网页也使用jQuery的api进行数据请求，但是在react-native中，由于jQuery使用了一些浏览器有的而native没有的东西，所以react-native不使用jQuery。

fetch是react-native提倡的获取数据请求的方式。

基本使用方式：

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

fetch的第二个参数是用于定制Http请求的一些参数

fetch('https://mywebsite.com/endpoint/', {  method: 'POST',  headers: {    'Accept': 'application/json',    'Content-Type': 'application/json',  },  body: JSON.stringify({    firstParam: 'yourValue',    secondParam: 'yourOtherValue',  })})

react-native支持XMLHttpRequest对象。所以有些ajax的封装库是可以使用的，我们自己也可以对其进行封装。

fetch函数返回的是个Promise对象，它有then()方法和catch()方法。then()方法接受一个携带回调成功返回数据的函数。catch()接受携带请求失败的信息的一个函数。

基本格式：

fetch('url').then(res => {    return res.json()}).then(res => {    console.log('想要的数据：',res.data);})