一、根据state的值动态改变布局
import React, { Component,PropTypes } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
Platform,
Alert,
ToastAndroid,
TextInput,
} from 'react-native';
import ulity from './ulity';
class SatisfactionSurvey extends Component {
constructor(props) {
super(props)
this.state = {
star:false,
};
}
render() {
return(
<View style={styles.container}>
<TouchableOpacity onPress ={
() => {
this.setState({
star:true,
})
}
}>
{
this.state.star == true?(
<Image style={[{marginTop:0},{marginLeft:11,width:18,height:17}]}
source={require('./images/star.png')}
/>
):(
<Image style={[{marginTop:0},{marginLeft:11,width:18,height:17}]}
source={require('./images/unstar.png')}
/>
)
}
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection:'row',
marginTop:21,
},
textStyle:{
color:'rgba(102,102,102,1)',
width:90,
fontSize:15,
marginLeft:22,
}
});
module.exports = SatisfactionSurvey;
state 属性主要用来存储组件自身需要的数据,我们一般通过修改 state 属性的值来更新数据,react native 内部会监听 state 的变化,一旦发生变化就会主动触发组件的 render() 方法来更新 UI,就是说state值得变化可以刷新布局。
一般情况下,使用这个state是再constructor()方法中初始化如上面的
constructor(props) {
super(props)
this.state = {
star:false,
};
}
在需要刷新UI的地方改变这个值就可以,如:
this.setState({
star:true,
})
state里面变量的值只能是用this.setState方法来改变。
上面代码适合做类似于状态选择器这类的效果。
二、list数据的动态布局
当然针对list的数据用listview来布局也是没问题的。
render() {
return(
<View style={styles.container}>
{
dataList.map((elem,key)=>{
return (<SatisfactionSurveyItem
key={key}
style={{marginLeft:30,marginTop:13,marginRight:30}}
elemData ={elem}
/>)
})
}
}
这个代码实现跟用listview布局效果是一样的, key={key}这个是为了解决出现的Each child in an array or iterator should have a unique “key” prop警告,对于这个警告原因是:react对dom做遍历的时候,会根据data-reactid生成虚拟dom树。如果你没有手动的添加unique constant key的话,react是无法记录你的dom操作的。它只会在重新渲染的时候,继续使用相应dom数组的序数号(就是array[index]这种)来比对dom树。错误说得很清楚,就是缺一个叫做key的东西,就是遍历的时候随便给item传个key值就可以了。