React Native ES6----写法总结

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

1
2
3

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

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

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

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

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

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

代码片段类似这样：

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

五、一般而言，一个app我们需要注册一下才能使用，这个就相当于react的入口。使用的关键字是AppRegistry，基本语法就是：

1	AppRegistry.registerComponent(‘AwesomeProject’, () => App);

其中这个App是一个组件。一般是最外层的入口组件。

六、react、react-native中最重要的两个概念
1、prop
其中prop是属性，不可改变，主要用于子组件和父组件的传值。
2、state
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>
                    <Button
                      onPress={() => this.onToggle()}
                      title="toggle"
                      color="#3c78ff"
                      accessibilityLabel="Learn more about this purple button"
                    />
                </View>
             </View>
        )
    }
}

这样我们就可以通过改变toggle的状态值来进行界面操作（通过操作数据改变界面）
onPress事件，相当于我们的click事件。在写法上需要理解一下。

七、在上面的Button组件中，我们的onPress事件是这样写的。

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

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

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

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

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

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