React Native ES6写法总结

1、每个界面，我们需要引入一些我们依赖的模块，比如“react”，“react-native”等等。使用的关键字就是import，基本写法如下：

import React,{ Component } from 'react';
import { View,Text,StyleSheet } from 'react-native';

2、组件化是react/react-native的核心，如何写一个组件呢？react/react-native是通过类的方式进行的，一个组件的基本书写方式是这样的：

class Home extends Component {render() {return (<View><Text>我是Component</Text></View>)}
}

3、当你写好了一个组件，你的组件需要抛出去给别的组件使用，在react/react-native中的引入方式就是export关键字：

export default class Home extends Component {render() {return (<View><Text>我是ThirdPageComponent</Text></View>)}
}

4、写好了一个组件，我们这个组件的样式总要控制吧？这时候需要用到StyleSheet关键字，它有一个create（）方法，接受一个对象作为参数。从而实现了样式的写法。
代码片段类似这样：

const styles = StyleSheet.create({container:{backgroundColor: "#CCCCCC",flex:1,justifyContent: "center",alignItems: "center"}
})

5、一般而言，一个app我们需要注册一下才能使用，这个就相当于react的入口。使用的关键字是AppRegistry，基本语法就是：
AppRegistry.registerComponent(‘AwesomeProject’, () => App);
其中这个App是一个组件。一般是最外层的入口组件。

当然了，这些仅仅是大体上的一些东西，我们看看细节。
细节一：react、react-native中最重要的两个概念是prop和state。其中prop是属性，不可改变，主要用于子组件和父组件的传值。而state代表状态，主要用于界面反馈，它的值是可以改变的。改变的方式是this.setState()函数。
那prop到底是怎么用的呢？

//我们这样写父组件
import React , { Component } from 'react';
import { AppRegistry} from 'react-native';import Child from './Child'class App extends Component {render() {return (<Child title="hello"></Child>)}
}AppRegistry.registerComponent('AwesomeProject', () => App);

//我们这样写子组件
import React,{ Component } from 'react';
import { View,Text,StyleSheet } from 'react-native';export default class Child extends Component{render() {return (<View><Text>{this.props.title}</Text></View>)}
}

在父组件中我们注册了App，并且调用了子组件Child，给它设定了属性 title =“hello”，然后在子组件中 {this.props.title} 展示在界面中。

那么state怎么使用呢？接着刚才的示例，我们对子组件稍作改变：

import React,{ Component } from 'react';
import { View,Text,Button,StyleSheet,Alert } from 'react-native';export default class Child extends Component{constructor(props) {super(props);this.state = {toggle: true};}onToggle() {//Alert.alert('Button has been pressed!');this.setState({toggle: !this.state.toggle})}render() {let display = this.state.toggle?this.props.title:"";return (<View><Text>{display}</Text><View><ButtononPress={() => this.onToggle()}title="toggle"color="#3c78ff"accessibilityLabel="Learn more about this purple button"/></View></View>)}
}

这样我们就可以通过改变toggle的状态值来进行界面操作（通过操作数据改变界面）。

细节二：onPress事件，相当于我们的click事件。在写法上需要理解一下。
在上面的Button组件中，我们的onPress事件是这样写的。

<ButtononPress={() => this.onToggle()}title="toggle"color="#3c78ff"accessibilityLabel="Learn more about this purple button"/>

注意：onPress={() => this.onToggle()}，这个代表什么意思呢？
相当于onPress = function(){ //coding }
而不是onPress = (function(){ //coding })();
区别是，一个是函数，一个是执行函数。
那么我们这样写onPress看对不对：

onPress={() => this.onToggle}//明显不对，因为this.onToggle是一个函数，我们的目的是onPress之后toggle的状态值改变！！所以后面需要执行，就有();

通过上面的理解，其实onPress还是可以这样写：

onPress={this.onToggle.bind(this)}//这样就符合逻辑

这里的bind（this）代表我需要把this的指向传递下去。为什么呢？因为this.onToggle不是箭头函数，而上面的是箭头函数。

<完>

React Native ES6写法总结相关推荐

ES6写法的reactjs
reactjs是目前最火的单页面框架,面向ES6语法,使用JSX语法进行组件化开发.JSX语法是把js和html混合起来编写代码,其核心就是以"<"">&qu ...
React Native中常用ES6语法
一:模块导入导出 //ES6 import React, { Component,PropTypes, } from 'react'; import {Image,Text } from 'react ...
React Native 初体验
2015年9月底开始正式接触React native,公司的ios团队用它写了一个安卓项目之后,到上周,公司彻底停止了RN的使用. 至于我们为什么停止使用RN,原因大致有两个: 一.RN对安卓的支持还 ...
[react native] navigator过渡卡顿问题
为什么80%的码农都做不了架构师?>>> navigator过渡卡顿问题 ReactNative导航设计与实现 https://segmentfault.com/a/11900 ...
React Native之箭头函数和延展操作符（...）
箭头函数在我们学习React Native的过程中,我们经常会遇到"=>"这样形式的书写,如下: import React, {Component} from 'react ...
React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述本节课将从React的特点.如何使用React.JSX语 ...
iOS开发者React Native学习路线
2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...
小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
React Native新手引导
序言本教程希望让您快速熟悉使用React Native来编写iOS和Android App的技巧.如果你希望知道React Native是什么以及为什么Facebook打造了它,可以读读这篇博文我 ...
React Native 每日一学(Learn a little every day)
本文出自<React Native学习笔记>系列文章. 每天一个知识点(技巧,经验,填坑日记等),每天学一点,离大神近一点. 汇聚知识,分享精华. 如果你是一名React Native爱好 ...

React Native ES6写法总结

React Native ES6写法总结相关推荐

最新文章

热门文章