Question

我是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>
    );
}

Answer 1

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

underlayColor？：color

触摸时将显示的衬底颜色   活性

因此，在您的渲染方法中，您可以写为

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

希望这会有所帮助..

Answer 2

我在渲染行

之前已经使用简单条件进行了管理

{(this.props.selectedValue == rowData.status) ? // change prop name as per your code

<TouchableHighlight>
    <Text style={{ color: '#ffffff', fontSize: 11 }}>
        {rowData.status}
    </Text>
</TouchableHighlight>

: <TouchableHighlight>
    <Text style={{ color:'#222d4a', fontSize: 11 }}>
        {rowData.status}
    </Text>
</TouchableHighlight>
}

在ReactNative中更改列表项背景OnSelection

2 个答案: