先放上React 中文網(wǎng)的鏈接吧 , 畢竟一開始就看官方文檔也是個好習慣 , 雖然講的東西有點不是那么的通俗 , 以后的筆記講以Android的角度來記錄React Native
Prop
- 基本用法
- 定義: 屬性 , 不可修改
- 翻譯: 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的其他使用方法.
- 使用默認屬性
在被引用的組建中使用如下代碼, 指定屬性的默認值
class SayHello extends Component {
static defaultProps = {
name:123
birth:20170823
}
.....
}
- 屬性約束
屬性約束可以來約束屬性的類型 , 以及必填項, 在使用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
- 介紹
- 定義: 狀態(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>
);
}
}
- 用法
這里寫一個文本顯示一個數(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方法, 該子類的用法不再贅述
