代码笔记 ---ListView样式不改变问题(2)
在开发中使用React Native 的时候经常会碰到使用ListView组件渲染的列表在需要改变其某一行的
样式的时候经常不给力,比如说一个列表,我选中一个希望其背景颜色改变,但是它就是一会儿会变
一会儿不会变,真的很头疼,所以当遇到类似需求的时候我就干脆放弃ListView,使用自定义组件传
值来解决这个问题。
首先全局定义一个数组
var datalist=[];
定义一个被选定的数组
constructor(props) { super(props); this.state={ selectstate:[], } }
定义一个初始数组的方法
initshuzu(num){ var nice=new Array(); for(var i=0;i<num;i++){ nice[i]=0; } this.setState({ selectstate:nice, }); }
在加载数据的时候调用初始化数组的方法,并将数组赋值给datalist
fetchStories() { var uu=API_HOME; fetch(uu) .then((response) => response.json()) .then((responseData) => { if(responseData.statusCode==0){ if(responseData.data.length!=0){ datalist=responseData.data; this.initshuzu( datalist.length); } } }) .catch((error) => { console.error(error); }) .done(); }
这里要注意把selectstate传到子组件里面去
render(){ return( <ScrollView showsHorizontalScrollIndicator ={false} horizontal ={true}> { datalist.map((item, key) => { return ( <SingleCenter key={key} centername={item.centername} myrowid={key} centerno={item.centerno} id={item.id} callback={this.selectcenter.bind(this)} centertel={item.centertel} currentpoint={item.currentpoint} selectstate={this.state.selectstate} /> ) }) } </ScrollView> ) }
点击某一项的时候触发的方法
selectcenter(rowid){ var arrays = this.state.selectstate.concat(); for ( var i=0;i<this.state.selectstate.length;i++){ arrays[i]=0; arrays[rowid]=1; } var uu=API_HOME ; fetch(uu) .then((response) => response.json()) .then((responseData) => { if(responseData.statusCode==0){ if(responseData.data.length!=0){ datalist=responseData.data; this.setState({ selectstate:arrays, }); }else{ this.setState({ selectstate:arrays, }); } } }) .catch((error) => { console.error(error); }) .done(); }
自定义的子组件,相当于ListView里面的renderrow,这里的callback就是回调的我们上面的selectcenter方法
主要效果就是点击某一项,背景色就发生改变
class SingleCenter extends Component{ render(){ return( <View style={{width:deviceWidth*0.44,height:deviceWidth*0.472,justifyContent:'center',alignItems:'center'}}> <TouchableOpacity onPress={()=>this.props.callback(this.props.myrowid)}> <View style={{width:deviceWidth*0.416,height:deviceWidth*0.416,backgroundColor:this.props.selectstate[this.props.myrowid]==0? "#E9E6E6":"#D2EDF6",borderRadius:5,justifyContent:'center',alignItems:'center',flexDirection:'column',marginLeft:deviceWidth*0.0278}}> <View style={{width:deviceWidth*0.38,height:deviceWidth*0.0833,justifyContent:'center',alignItems:'center',paddingLeft:5}}> <Text style={{fontSize:deviceWidth*0.0389,color:'#1980DC'}}>{this.props.centername}</Text> </View> <View style={{width:deviceWidth*0.38,height:deviceWidth*0.07,justifyContent:'center',alignItems:'flex-start',paddingLeft:5}}> <Text style={styles.text}> {this.props.centername}</Text> </View> <View style={{width:deviceWidth*0.38,height:deviceWidth*0.07,justifyContent:'center',alignItems:'flex-start',paddingLeft:5}}> <Text style={styles.text}> {this.props.centerno}</Text> </View> <View style={{width:deviceWidth*0.38,height:deviceWidth*0.07,justifyContent:'center',alignItems:'flex-start',paddingLeft:5}}> <Text style={styles.text}> {this.props.centertel}</Text> </View> <View style={{width:deviceWidth*0.38,height:deviceWidth*0.07,justifyContent:'flex-start',alignItems:'center',paddingLeft:5,flexDirection:'row'}}> <Text style={{fontSize:deviceWidth*0.0389,color:'#1980DC'}}>{this.props.currentpoint}</Text> </View> </View> </TouchableOpacity> </View> ) } }