先放上React 中文網(wǎng)的鏈接吧 , 畢竟一開始就看官方文檔也是個好習慣 , 雖然講的東西有點不是那么的通俗 , 以后的筆記講以Android的角度來記錄React Native

Prop

1. 基本用法

• 定義: 屬性 , 不可修改
• 翻譯: final對象,只允許初始化不允許修改

就像是傳值一樣, RN中可以引用組件(Compoment)并傳遞參數(shù) , 而Prop就是其中傳遞參數(shù)的角色之一, 看下面的例子:

//定義了一個組件
class SayHello extends Component {
  render() {
    return (
      // 這里使用prop來作為接收參數(shù) , 相當于Android中的對象
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

//在主組件中應(yīng)用
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. 介紹

• 定義: 狀態(tài) , 可以改變
• 翻譯: 普通的對象
  首先也是要在被引用的組建中設(shè)置默認值 , 有兩種初始化方法:

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

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

2. 用法

這里寫一個文本顯示一個數(shù)字 , 單擊本文數(shù)字自增 , 關(guān)鍵方法已在代碼中標出

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={() => {
                          // 此處要設(shè)置state的時候 , 需要調(diào)用this.state
                          this.setState({
                              size: this.state.size + 10
                          });
                      }}
                >state的值為{this.state.size}</Text>
            </View>
        );
    }
}

Class

這個不用翻譯了昂 , 直接就是類 , 只不過是ES6里的類 , 但大體上的用法是差不多的 , 都是面向?qū)ο? 也都有繼承.

• 類的基本使用

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的類 , 有個構(gòu)造方法傳入三個參數(shù), 將參數(shù)保存起來; 在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>
        );
    }
}

• 繼承
  面向?qū)ο螽斎簧俨涣死^承 , 這里的繼承也和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方法, 該子類的用法不再贅述