React Native笔记2——Props和State

先放上React 中文网的链接吧 , 毕竟一开始就看官方文档也是个好习惯 , 虽然讲的东西有点不是那么的通俗 , 以后的笔记讲以Android的角度来记录React Native

Prop

1. 基本用法

• 定义: 属性 , 不可修改
• 翻译: final对象,只允许初始化不允许修改

就像是传值一样, RN中可以引用组件(Compoment)并传递参数 , 而Prop就是其中传递参数的角色之一, 看下面的例子:

//定义了一个组件
class SayHello extends Component {
  render() {
    return (
      // 这里使用prop来作为接收参数 , 相当于Android中的对象
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

//在主组件中应用
class Awesome extends Component {
  render() {
    return (
      <View>
        // 在这里直接传值
        <SayHello name='Rexxar' />
        <SayHello name='Jaina' />
      </View>
    );
  }
}

有了基本使用后 , 我们可以再看一下prop的其他使用方法.

2. 使用默认属性

在被引用的组建中使用如下代码, 指定属性的默认值

class SayHello extends Component {
   static defaultProps = {
        name:123
        birth:20170823
    }
    .....
}

3. 属性约束

属性约束可以来约束属性的类型 , 以及必填项, 在使用propTypes时需要引入一个包:
import * as PropTypes from "react-native/flow/prop-types";

class SayHello extends Component {
    static propTypes={
          name:PropTypes.number.isRequired,
          age:PropTypes.string,
          sex:PropTypes.boolean.isRequired
    }
    ....
}

---

State

1. 介绍

• 定义: 状态 , 可以改变
• 翻译: 普通的对象
  首先也是要在被引用的组建中设置默认值 , 有两种初始化方法:

class SayHello extends Component {
    //方式1  直接定义
    state = {
        name: '二狗'
    }

    constructor(prop) {
        super(prop)
        //方式2  构造方法中定义
        this.state = {
            name: '二狗'
        }
    }
    render() {
        return (
            <Text>{this.state.name} say hello</Text>
        );
    }
}

2. 用法

这里写一个文本显示一个数字 , 单击本文数字自增 , 关键方法已在代码中标出

export default class RNDemo3 extends Component {
    constructor(prop) {
        super(prop);
        this.state = {
            size: 10
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={{fontSize: this.state.size}}
                      // 为Text添加点击事件
                      onPress={() => {
                          // 此处要设置state的时候 , 需要调用this.state
                          this.setState({
                              size: this.state.size + 10
                          });
                      }}
                >state的值为{this.state.size}</Text>
            </View>
        );
    }
}

Class

这个不用翻译了昂 , 直接就是类 , 只不过是ES6里的类 , 但大体上的用法是差不多的 , 都是面向对象, 也都有继承.

• 类的基本使用

export default class Student{
    constructor(name,age,summary){
        this.name=name;
        this.age=age;
        this.summary=summary;
    }
    getDescription(){
        return '姓名:'+this.name+"  年龄:"+this.age+"  简介:"+this.summary;
    }
}

上面的代码定义了一个Student的类 , 有个构造方法传入三个参数, 将参数保存起来; 在getDescription方法中使用这些变量. 类开头的export defalut表示将类导出 , 这样其他的js文件中就可以通过import使用该类了:
import Student from './Student'; (这里的Student类在根目录下)

export default class RNDemo3 extends Component {

    constructor(){
        super();
        this.stu=new Student('夜的记忆',12,'主c666');
    }
    render() {
        return (
            <View style={styles.container}>
                <Text>{this.stu.getDescription()}</Text>
            </View>
        );
    }
}

• 继承
  面向对象当然少不了继承 , 这里的继承也和Android中的类似:

import Student from "./Student";

export default class Minuit extends Student{

    constructor(name){
        super(name,21,"Minuit");
        this.name=name;
    }

    getDescription() {
        return this.name+"  "+super.getDescription();
    }
}

定义子类Minuit, 继承Student并重写egtDescription方法, 该子类的用法不再赘述