代码笔记 ---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>
    )
  }
}