Question

我有水平列表视图，我想按行并更改行样式。（选定行：更改样式行，未选中行：更改为默认样式）。我在它的行上使用可触摸的高亮显示。有什么建议吗？我试着搜索大约3天了。但我仍然无法抓住它。谢谢你。

class MatchSchedule extends Component {

constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
    });
    this.state = {
        dataSource: ds.cloneWithRows(this._getWeekList()),
        selectedID: 'Week 3',
    };
     render() {
       return (
        <View style={styles.container}>
            <View style={styles.weekContain}>
                <ListView
                    showsHorizontalScrollIndicator={false}
                    horizontal={true}
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow.bind(this)}
                >
                </ListView>
            </View>
        </View>
      );}
    _renderRow(rowData, rowID) {
    return (
        <TouchableHighlight onPress={() => {
            this._selectedWeek(rowData, rowID)
        }
        }
        >
            <View style={this.state.selectedID == rowData ? styles.weekRowSelected : styles.weekRow}>
                <Text style={this.state.selectedID == rowData ? styles.weekTextSelected : styles.weekText}> {rowData} </Text>
            </View>
        </TouchableHighlight>
    );
}
 _selectedWeek(rowData, rowID) {
    this.setState({
        selectedID: rowData,
        dataSource: this.state.dataSource.cloneWithRows(newDs)
    });
}   
}

我也尝试重新渲染listview，但仍然不能。我是新的反应本地人。

Answer 1

Hi Leang参考此帖子React native: change style of ListView item on touch使用以下代码开始

class ListExample extends React.Component {

    constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 === r2
    });
    this.state = {
      dataSource: ds.cloneWithRows(this._getWeekList()),
      selectedID: 'tues'
    }
  }

  _getWeekList = () => {
    return ["monday", "tues", "wed", "thurs"]
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.weekContain}>
          <ListView showsHorizontalScrollIndicator={false} horizontal={true} dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)}></ListView>
        </View>
      </View>
    );
  }
  _renderRow(rowData, rowID) {
    return (
      <TouchableHighlight onPress={() => {
        this._selectedWeek(rowData, rowID)
      }}>
        <View style={this.state.selectedID == rowData
          ? styles.weekRowSelected
          : styles.weekRow}>
          <Text style={this.state.selectedID == rowData
            ? styles.weekTextSelected
            : styles.weekText}>
            {rowData} {this.state.selectedID}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }
  _selectedWeek(rowData, rowID) {
    console.log('Selected week '+rowData);
    this.setState({selectedID: rowData, dataSource: this.state.dataSource.cloneWithRows(this._getWeekList())});
  }
}

var styles = StyleSheet.create({
  weekRowSelected : {
  },
  weekRow: {
  },
  weekTextSelected: {
    fontSize: 16,
    color: 'yellow',
  },
  weekText: {
    fontSize: 14,
    color: 'blue',
  }
})

Leang看着你添加的代码

const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
    });

在这里你已经告诉过，只有在数据发生变化时才重新呈现列表，而它并没有改变。要使其工作，您必须修改ds然后传递它或只是将上述条件更改为

const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 === r2,
    });

我自己尝试了这个代码并且它有效。希望它有所帮助。

React-Native Listview，按行并更改该行样式

1 个答案: