【问题标题】:React Native select row on ListView when push it推送时在 ListView 上反应本机选择行
【发布时间】:2017-06-28 22:50:17
【问题描述】:

当我用十个或更少的元素填充 ListView 时,我可以在触摸它时选择特定行并更改行背景颜色。但是当我在 ListView 中放置更多 10 个元素时,应用程序不会很好地更改 this.state.data。如果我在 for 循环中的变量大于 10,则无法将其状态更改为 false/true,并且我无法更改行背景颜色...

有什么建议吗?

class UbicacionScreen extends React.Component {

  constructor(props) {
     super(props)

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

    this.state = {
      data: [],
      dataSource: ds,
    }

  }

  componentDidMount() {

    var datas = [];

    for (var i = 0; i <= 11; i++) {
       datas.push({
          row: i,
          isSelect: false,
       });
    }

    this.setState({data: datas})
    this.setState({
       dataSource: this.state.dataSource.cloneWithRows(datas)
    })    
  }

  render() {

    return (      
      <ScrollView style={styles.body}>        
        <View style={styles.container}>
          <View style={styles.listReglamentos}>
              <List style={{backgroundColor: '#fff', marginTop: 14}}>
                <ListView
                  renderRow={this._renderRow.bind(this)}
                  dataSource={this.state.dataSource}                  
                />
            </List>
          </View>      
        </View>
      </ScrollView>
    );
  }

  _renderRow(rowData: string, sectionID: number, rowID: number) {
      return (
        <TouchableHighlight onPress={() => { this._onPressRow(rowID, rowData) }}>
          <View style={[rowData.isSelect ? styles.activeRow : styles.deactivedRow, styles.style_row_view]}>
            <Text style={styles.style_text}>{rowData.municipio}</Text>
            <Text style={styles.style_text}>{rowData.isSelect ? 'true' : 'false'}</Text>
          </View>
        </TouchableHighlight>
      );
  }

  _onPressRow = (rowID, rowData) => {
      rowData.isSelect = !rowData.isSelect;
      var dataClone = this.state.data;
      dataClone[rowID] = rowData;
      this.setState({
        data: dataClone
      });
  }

}

【问题讨论】:

    标签: listview react-native


    【解决方案1】:

    没有必要为了比较而使用data 数组。您可以将选定的值保存在状态中,然后更改您的这一行

    <View style={[
        (rowData.isSelect)
        ? styles.activeRow 
        : styles.deactivedRow
        , styles.style_row_view
    ]}>
    

    <View style={[
      (this.state.selectedValue == rowData.municipio) 
        ? styles.activeRow 
        : styles.deactivedRow
        , styles.style_row_view
    ]}>
    

    【讨论】:

    • 感谢您的回复。我为此修改了代码: 我的问题的解决方案是:
    • 现在你能不能得到正确的选择值?
    • 是的,主要错误不是表明 ListView 必须使用 initialListSize 和数组大小的值进行初始化。谢谢
    猜你喜欢
    • 2022-08-16
    • 1970-01-01
    • 2023-03-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-15
    • 1970-01-01
    相关资源
    最近更新 更多