React Native 常见属性的理解
有多处参考来自大神: 首先了解state和props的差异: 一个组件可以通过两种数据类型进行控制,一种是props,一种是state。
1、propsprops(属性) 概念 大多数组件在创建的时候可以自定义一些参数,这些定制参数就统称为props(属性)。所谓props,就是单向的属性传递。es6中的语法,属性多的时候,可以传递一个对象。 // 自定义组件
class Icon extends Component{
render(){
return(
<Image source={this.props.image} style={{width:193,height:110}}/>
);
}
}
export default class firstRN extends Component {
constructor(props) {
super(props);
this.state = {text:''};
}
render() {
// 配置数据
let pic = {
uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'
}
return (
// image
//<Image source={pic} style={{width:193,height:110}} />
<View style={{padding:20}}>
<Icon image={pic} />
</View>
);
}
}
上面第一种方式是传统的图片创建方式,第二种是采用自定义的方式,定义了一个image的props属性,在自定义组件内通过
2、state一般情况下,我们初始化state状态,是在constructor构造函数中,然后如果需要改变时,我们可以调用setState方法,当state发生变化则更新DOM。 经典案例: class ShowBlink extends Component{
constructor(props){
super(props);
this.state = {showText:true}
// 设置计时器
setInterval(()=>{
this.setState({showText:!this.state.showText});
},1000);
}
render(){
let showMsg = this.state.showText ? this.props.text:'';
return(
<Text>{showMsg}</Text>
);
}
}
export default class firstRN extends Component {
render(){
return(
<ShowBlink text="hello world!"/>
);
}
}
这样效果为每秒闪烁一次的效果。
3、style通过style对空间进行样式上的调整,合理的使用style会达到意想不到的美感盛宴。 设置样式的方式大致分为两种,一种是在组件内部进行样式的设置,一种通过StyleSheet.create创建集合,集中进行样式的设置(推荐)。 <View> <View style={{width:50,height:50,backgroundColor:'powderblue'}}></View> <View style={{width:100,height:100,backgroundColor:'skyblue'}}></View> <View style={{width:150,height:150,backgroundColor:'steelblue'}}></View> </View>
第二种方式: <View>
<View style={styles.wid5}></View>
<View style={styles.wid10}></View>
<View style={styles.wid15}></View>
</View>
const styles = StyleSheet.create({
wid5:{
width:50,height:50,backgroundColor:'powderblue'
},wid10:{
width:100,height:100,backgroundColor:'skyblue'
},wid15:{
width:150,height:150,backgroundColor:'steelblue'
}
});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |