React-Native Listview，按行并更改该行样式 [英] React-Native Listview, press row and change that row style

问题描述

我有水平列表视图，我想按行并更改行样式. (选中的行:更改样式行，未选中的行:更改为默认样式).我在它的行上使用可触摸的高光.有什么建议吗?我已经尝试搜寻约3天了.但我仍然赶不上它.谢谢你.

I had horizontal listview, and I want to press row and change row style. ( selected row : change style row ,unselected row : change to default style). I use touchable highlight on row of it. any suggestion for it ?. I try to search about 3 days already. but I still cannot catch it. thank advance.

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

我也尝试重新渲染列表视图，但仍然不能.我是新来的本机.

I am try to re-render listview also, but still cannot. I am new react-native.

推荐答案

您好，Leang引用了此线程

Hi Leang refer to this thread React native: change style of ListView item on touch Use below code to get started

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',
  }
})

继续查看您添加的代码

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

在这里，您已经告诉您只有在数据更改时(而不是数据更改)，才重新呈现列表.要使其正常工作，您必须先修改ds，然后再传递它，或者将上述条件更改为

in here you have told react to re-render the list only when data changes, whereas it isn't changing. To make it work you have to either modify your ds and then pass it or simply change the above condition to

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

我自己尝试了此代码，它可以正常工作.希望它会有所帮助.

I tried this code myself and it works. Hopefully it helps.

这篇关于React-Native Listview，按行并更改该行样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！