先放上React 中文网的链接吧 , 毕竟一开始就看官方文档也是个好习惯 , 虽然讲的东西有点不是那么的通俗 , 以后的笔记讲以Android的角度来记录React Native
Prop
- 基本用法
- 定义: 属性 , 不可修改
- 翻译: 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的其他使用方法.
- 使用默认属性
在被引用的组建中使用如下代码, 指定属性的默认值
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
- 介绍
- 定义: 状态 , 可以改变
- 翻译: 普通的对象
首先也是要在被引用的组建中设置默认值 , 有两种初始化方法:
class SayHello extends Component {
//方式1 直接定义
state = {
name: '二狗'
}
constructor(prop) {
super(prop)
//方式2 构造方法中定义
this.state = {
name: '二狗'
}
}
render() {
return (
<Text>{this.state.name} say hello</Text>
);
}
}
- 用法
这里写一个文本显示一个数字 , 单击本文数字自增 , 关键方法已在代码中标出
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方法, 该子类的用法不再赘述
