listview – 在ReactNative中更改列表项背景OnSelection

发布时间：2020-12-15 09:30:53 所属栏目：百科来源：网络整理

导读：我是React-Native的新手.我想使用ListView选择一个项目.如何更改列表视图项目背景以显示选择.我这样想.请帮助.让我知道我在这里做错了什么.它是第一次选择,但不是再次. getRowSelectionStyle(isSelect){ if(isSelect){ return( {flex: 1,backgroundColor: '#

我是React-Native的新手.我想使用ListView选择一个项目.如何更改列表视图项目背景以显示选择.我这样想.请帮助.让我知道我在这里做错了什么.它是第一次选择,但不是再次.

getRowSelectionStyle(isSelect){
      if(isSelect){
        return(
          {flex: 1,backgroundColor: '#dedede'}
        )
      }
      else{
        return(
          {flex: 1,backgroundColor: '#ffffff'}
        )
      }
 }

_onPressRow(rowID,rowData) {
      // Resetting all Row value of the list
      var dataClone = this.state.listData;
      for (var i = 0; i < dataClone.length; i++) {
        var cloneData = dataClone[i];
        if(i == rowID){
          cloneData.isSelect = !cloneData.isSelect;
          selectedFormIndex = cloneData.isSelect?i:(-1);
        }
        else{
          cloneData.isSelect = false;
        }
        dataClone[i] = cloneData;
      }

      this.setState({ listData: dataClone });
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(dataClone)
      });
  }

_renderRow(rowData: string,sectionID: number,rowID: number) {
      var formTitle = rowData.row+'('+rowData.formNo+')';
      return (
        <TouchableHighlight onPress={this._onPressRow.bind(this,rowID,rowData)} >
          <View style={this.getRowSelectionStyle(rowData.isSelect)}>
            <View style={styles.listItemContainer}>
                <View style={styles.listItemTextContainer}>
                <Text style={styles.listItemText}>
                    {formTitle}
                </Text>
                <Text style={this.getRowFrequencyStyle(rowData.frequency)}>
                    {rowData.frequency}
                </Text>
                </View>
                <View style={this.getStatusColorStyle(rowData.status)}>
                <TouchableHighlight>
                    <Text style={{color:(rowData.isSelect === false)? '#ffffff':'#222d4a',fontSize: 11}}>
                    {rowData.status}
                    </Text>
                </TouchableHighlight>
                </View>
            </View>

            <View>
                <Text style={styles.listItemDate}>
                    {'Schedule Start Date: '+rowData.startDate}
                </Text>
                <Text style={styles.listItemDate}>
                    {'Schedule End Date:   '+rowData.endDate}
                </Text>
            </View>
          </View>
        </TouchableHighlight>
      );
    }


_renderList() {
      if(this.state.listData.length == 0){
          return (
            <View style={{height: 150,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize: 16,color:"gray",width:250}}>
                  No form available for this site. Please select a site.
                </Text>
            </View>
        );
      }
      else{
        return (
          <ListView
            dataSource={this.state.dataSource}
            renderSeparator={this._renderSeparator}
            renderRow={this._renderRow.bind(this)}
            enableEmptySections={true}
          />
        );
      }
 }


render(){
    return(
        <View style={styles.listContainer}>
                 {this._renderList()}
        </View>
    );
}

解决方法

您可以使用react-native docs中提到的underlayColor

underlayColor?: color

The color of the underlay that will show through when the touch is
active.

所以在你的渲染方法中,你可以写为

<TouchableHighlight onPress={this._onPressRow.bind(this,rowData)} underlayColor={"green"} >        
        ...         
</TouchableHighlight>

希望这可以帮助..

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!