如何更改React-Native中标记的ListView项

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

导读：我使用ListView作为选择器,一切正常,但我无法更改列表元素的可视状态： this.state = { dataSource: dataSource.cloneWithRows([ { provincia:"Bocas del Toro",capital: "Bocas del Toro",selected:false,},{ provincia:"Coclé",capital: "Penonomé",...

我使用ListView作为选择器,一切正常,但我无法更改列表元素的可视状态：

this.state = {
  dataSource: dataSource.cloneWithRows([
                        {
                            provincia:"Bocas del Toro",capital: "Bocas del Toro",selected:false,},{
                            provincia:"Coclé",capital: "Penonomé",...

我直接在onPress上更改数据,如下所示：

rowPressed(rowData) {
    rowData.selected = true;
    this.props.onAreaSelect(rowData);
}

我尝试改变这样的观点：

<TouchableHighlight onPress={() => this.rowPressed(rowData)}
      underlayColor='#eeeeee' >
    <View>
      <View style={[styles.rowContainer,this.state.selected ? styles.selected :  styles.unselected ]}>
        <View  style={styles.textContainer}>
            <Text style={styles.title} 
                  numberOfLines={1}>{rowData.provincia}</Text>
            <Text style={styles.description} 
                  numberOfLines={1}>Capital: {rowData.capital}</Text>
        </View>

      </View>
      <View style={styles.separator} />
    </View>
  </TouchableHighlight>

styles.selected和styles.unselected只有2种不同的定义样式.

我不知道你的onAreaSelect在这里做了什么,但我有类似的问题,诀窍是再次设置dataSource状态对应你改变的rowData.

this.setState({
  dataSource: this.state.dataSource.cloneWithRows(
    // your new data here
  )   
});

对于详细的实现,React Native官方ListView示例确实帮助了我.
https://facebook.github.io/react-native/docs/listview.html#examples

在他们的示例中,他们使用另一个对象_pressData来存储正在选择哪一行,每次更改时,他们都会调用_genRows来执行上述操作.

（编辑：李大同）

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