ReactNative开发(二)之基础与入门

一、初识React Native的组件

什么是React Native的组件？
React组件让你将UI分割成独立的、可重用的一些碎片或者部分，这些部分都是相互独立的

创建组件的三种方式

ES6创建组件的方式
ES5创建组件的方式
函数式定义的无状态组件

这里我们主要还是学习下ES6的相关知识点

二、项目的运行及编写

首先我们在命令行中新建了一个ReactNative项目，不清楚请看ReactNative开发(一)，我这里考虑到框架的原因，选择的WebStorm开发工具，集成框架的话，这个工具还是比较实用，我们来看看目录结构

说实话，第一眼觉得这跟Androidstudio的目录结构简直如出一辙，为了同时在Android和ios中同步效果，这里新建一个js文件，这里取名为setup，将android.js的文件内容复制过来，并且按如下编写:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
import Hello from "./Hello";

export default class setup extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Hello/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:50,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

这里修改类名为setup,Component 为组件， render()是渲染界面的必须的方法，不可缺少，并且删除了AppRegistry引用，然后把Android和ios的js文件修改引用这个setup.js文件，如下：

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import setup from "./setup";

AppRegistry.registerComponent('AwesomeProject', () => setup);

再次运行项目，打开Terminal命令行，运行没错的话就修改成功，我们来新建一个js文件显示内容，这里取名为hello.js文件，内容如下:

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

export default class Hello extends  Component{

    render(){
        return <Text style={{fontSize:20,backgroundColor:'red'}}>我的第一个react native程序</Text>
    }
}

运行项目，即可看到Text内容的显示了

三、React Native组件生命周期

组件的生命周期分成三个状态，这里就不细说每个生命周期了，如下

Mouting---已经插入真是DOM
Updating---正在被重新渲染
Unmouting---已经一处真实DOM

四、导入和导出

这里我们来看下三个导入和导出

类的导入和导出
变量常量的导入和导出
方法的导入导出

类的导入和导出

//导出
export default class setup extends Component 
//导入
import Hello from "./Hello";

变量常量的导入和导出

//这里变量常量没有导出的写法，看怎么定义
var name='dddd';
var age='22';
//导入
import Hello, {name,age} from "./Hello";

方法的导入导出

//导出
export function sum(a,b) {
    return a+b;
}
//导入
import Hello, {sum} from "./Hello";
//下面我们看看怎么引用
export default class setup extends Component {

    constructor(props){
        super(props);
        this.state=({
            result:''
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Hello/>
                <Text style={{fontSize:20}}>名字:{name}</Text>
                <Text style={{fontSize:20}}
                onPress={()=>{
                    var result=sum(2,3);
                    this.setState({result:result,})
                }}
                >2+3={this.state.result}</Text>
            </View>
        );
    }
}

四、props的使用

对于props的理解，我觉得是页面传递属性的作用，将属性和变量通过props传递给组件，组件在自己对应的类中可以获取属性值，但是这些属性值是不可改变的，举例如下：

//在主界面这里调用的Hello组件，传递age到组件中去
  render() {
        return (
            <View style={styles.container}>
                <Hello
                    age='22'
                />
            </View>
        );
    }
 //在Hello组件中调用age，如果没有传递，那么在defaultProps使用默认值
 static defaultProps={
        name:'小明',
        age:23
    }

  static propTypes={
      name:PropTypes.string,
  }

    render(){
        return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.props.age}</Text>
    }

这里的defaultProps里面是初始化这个组件的默认值，如果没有收到传递的值，那么就使用默认值，propTypes则是对这些属性的类型的规范，如果传递的不对，那么将给出提示，如果要添加规范，那么需要引用这个类PropTypes

import React, { Component ,PropTypes} from 'react';

下面来看看ES6中传递变量的便捷之处，如果这个params中有很多属性，那么一个个的传递自然不是好的解决方式，这里便使用{…params}的方式传递所有属性；

 render() {
        var params={name:'aaa',age:18,sex:'男'};
        return (
            <View style={styles.container}>
                <Hello
                    {...params}
                />
            </View>
        );
    }

还有一种方式传递，获取部分params的属性，然后在通过name={name}的形式传递

 render() {
        var params={name:'aaa',age:18,sex:'男'};
        var {name,age}=params;
        return (
            <View style={styles.container}>
                <Hello
                    name={name}
                    age={age}
                />
            </View>
        );
    }

五、State的使用

对于state的理解，其实相当于我们java中定义变量的意思，有两种方式去定义state中的变量，首先来看一下第一种，在constructor中定义，然后通过this.state.size调用

 constructor(props){
        super(props);
        this.state={
            size:80
        }
    }
render(){
        return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.state.size}</Text>
    }

第二种，在constructor外部调用

state={
        size:80
    }
constructor(props){
        super(props);
    }
render(){
        return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.state.size}</Text>
    }

下面我们来看下怎么改变设置变量，注意使用View记得导入，调用setState方法在里面改变size的大小

    state={
        size:80
    }

    constructor(props){
        super(props);
    }

    render(){
        return <View>
            <Text
                style={{fontSize:20,backgroundColor:'blue'}}
                onPress={()=>{
                this.setState({
                    size:this.state.size+10
                })
            }}
            >吹哦啊</Text>
            <Text
                style={{fontSize:20,backgroundColor:'green'}}
            >我的气泡={this.state.size}</Text>
        </View>
    }

六、ref的使用

ref是组件的一种特殊属性，是组件渲染后，指向组件的一个引用；通俗来说，相当于可以拿到这个组件的引用，组件中的变量，可以通过ref获取，我们看下如何使用ref，有几种方式定义ref，这里说其中一种 ref=”reftest”，然后通过this.refs.reftest获取到该组件的引用，然后调用getsize方法获取四则的值

render() {
        return (
            <View style={styles.container}>
                <Text
                onPress={()=>{
                    var size = this.refs.reftest.getSize();
                    this.setState({
                        size:size,
                    })
                }}
                >
                    获取大小:{this.state.size}
                </Text>
                <Hello
                    ref="reftest"
                />
            </View>
        );
    }
//=================================================
//组件的渲染，这里提供getSize方法给外部调用
 render(){
        return <View>
            <Text
                style={{fontSize:20,backgroundColor:'blue'}}
                onPress={()=>{
                this.setState({
                    size:this.state.size+10
                })
            }}
            >吹哦啊</Text>
            <Text
                style={{fontSize:20,backgroundColor:'green'}}
            >我的气泡</Text>
        </View>
    }
 getSize(){
        return this.state.size;
    }

七、类的使用

这里类的使用跟java类似，有继承和重写，下面我们来看看一个例子，这里同样也是有构造方法，

export default class Student{
    constructor(name,sex,age){
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    getDescription(){
        return '姓名'+this.name+'性别'+this.sex+'年龄'+this.age;
    }
}
==================================
//在另一个类中初始化
   constructor(props){
        super(props);
        this.stu = new Student('老石','男',28);
    }
//调用，this.stu这里已经表示Student的引用
this.stu.getDescription()

我们来看看这里类的继承

import Student from "./Student";
export default class MyStudent extends Student{
    //调用父类构造函数
    constructor(){
        super('小明','女',25);
    }
    //重写父类的方法
    getDescription(){
        return '我的'+super.getDescription();
    }
}