前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
ReactNative之组件属性(Props、State)
- 在App开发中，少不了组件之间的传值，在RN中组件之间通信需要用到Props和State。
Props(属性)
- 什么是Props？一般用于自定义组件，大多数组件在创建时就可以使用各种参数来进行定制，用于定制的这些参数就称为props（属性）。
- name:就是Props，通过this.props.name访问
<Room name="小码哥" />
- 注意：props是在父组件中指定，而且一经指定，在整个组件的生命周期中都不再改变。
- 使用
class Room extends Component {
render() {
return (
<View style={styles.viewStyle}>
<Text sytle={styles.textStyle}>欢迎来到{this.props.name}直播间</Text>
</View>
);
}
}
export default class ReactDemo extends Component {
render() {
return (
<Room name="小码哥" />
);
}
}
const styles = StyleSheet.create({
viewStyle:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
textStyle:{
marginTop:20
}
});
- 效果
State
-
State：如果以后想修改某个属性，就修改界面，就需要用state。
-
注意:State属性一般在constructor中声明(ES6)，在setState中修改数据.
-
定义state属性
this.state = {
num:1,
};
- 修改state属性
this.setState({
num : number
})
-
每隔一秒，人数+1，定时器
-
注意：这里定时器方法必须用bind.
-
使用
// 自定义房间组件
class Room extends Component {
timeUpdate() {
var number = this.state.num;
number++;
this.setState({
num : number
})
}
// 构造方法
constructor(props){
super(props);
// 定义state属性
this.state = {
num:1,
};
console.log('初始化对象');
// 创建定时器 1秒 = 1000
// 这里必须绑定,bind会生成了一个新的函数,并且由绑定者调用,否则this不明确
setInterval(this.timeUpdate.bind(this),1000);
}
render() {
return (
<View style={styles.viewStyle}>
<Text sytle={styles.textStyle}>欢迎来到{this.props.name}直播间</Text>
<Text>观众数 {this.state.num}</Text>
</View>
);
}
}
// 主组件
export default class ReactDemo extends Component {
render() {
return (
<Room name="小码哥" />
);
}
}
const styles = StyleSheet.create({
viewStyle:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
textStyle:{
marginTop:20
}
});