Props (属性)与State(状态)
Props 可以看做是android中的 final static 成员变量
在使用之前声明,使用的时候直接调用,并且该值不变
声明的地方需要放在render(){}里面,return 之前
import React,{ Component } from 'react';
import { AppRegistry,Image } from 'react-native';
class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193,height: 110}} />
);
}
}
AppRegistry.registerComponent('Bananas',() => Bananas);
上面是个简单的例子,image定义的View,source和stype都是js中的属性,具体的值是通过props获取的
{pic}表示获取pic是个名称,取pic所赋的值,和java的声明成员变量和赋值没有什么区别
这个例子比较简单,看下面例子:
import React,Text,View } from 'react-native';
class Greeting extends Component { render() { return ( <Text>Hello {this.props.name}!</Text> ); } } class LotsOfGreetings extends Component { render() { return ( <View style={{alignItems: 'center'}}> <Greeting name='Rexxar' /> <Greeting name='Jaina' /> <Greeting name='Valeera' /> </View> ); } } AppRegistry.registerComponent('LotsOfGreetings',() => LotsOfGreetings);
从这个例子里面可以看出执行顺序是从LotsOfGreetings开始执行的
当执行到的时候去Greeting这个类执行代码,并且将name=”Rexxar”的值传入其中
然后Greeting 这个类就会执行里面显示Text的方法,并且取值是this.props.name 获取
分解成java代码
class LotsOfGreetings extends Component { main(){ new Greeting (Rexxar); new Greeting (Jaina); new Greeting (Valeera); } } class Greeting { private final String name; Greeting (String name){ this.name = name; } main(){ system.out(this.name); } }
大概这个意思,语法问题就算了,看逻辑就行
props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
这是state 的官方解释
大概就是常量和变量的区别了吧
看一下例子:
import React,View } from 'react-native';
class Blink extends Component { constructor(props) { super(props); this.state = { showText: true };
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({ showText: !this.state.showText });
},1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component { render() { return ( <View> <Blink text='I love to blink' /> <Blink text='Yes blinking is so great' /> <Blink text='Why did they ever take this out of HTML' /> <Blink text='Look at me look at me look at me' /> </View> ); } } AppRegistry.registerComponent('BlinkApp',() => BlinkApp);
看了之前的例子在来分析这个例子,就比较好弄清楚了
BlinkApp 就是主进程,new了4个Blink对象,分别给对象里面的props的test属性赋值
在Blink的render() 里面使用this.props 来获取test的值,区别就是多了个显示与隐藏的变化
也就是通过一个变量进行控制
在constructor(props) 里面进行初始化,这个目前当成固定写法好了
setInterval 就当个无限循环的延迟hander
修改的方法就是通过this.setState
上面的都是一些基本的使用,下一章看一下样式的设置
