如何更改在 React-Native 中标记的 ListView 项 [英] How to change a ListView Item as Marked In React-Native

问题描述

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

this.state = {数据源:dataSource.cloneWithRows([{省:博卡斯德尔托罗"，首都:博卡斯德尔托罗"，选择:假，},{provincia:"科克莱",首都:Penonomé"，选择:假，},...

我像这样直接在Press上更改数据:

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

我尝试像这样改变视图:

this.rowPressed(rowData)}underlayColor='#eeeeee' ><查看><查看样式={[styles.rowContainer, this.state.selected ?style.selected :styles.unselected ]}><视图样式={styles.textContainer}><文字样式={styles.title}numberOfLines={1}>{rowData.provincia}<文字样式={styles.description}numberOfLines={1}>Capital: {rowData.capital}</Text></查看></查看><视图样式={styles.separator}/></查看></TouchableHighlight>

其中 styles.selected 和 styles.unselected 只是 2 种不同的定义样式.

解决方案

我不知道你的 onAreaSelect 在这里做了什么，但我遇到了类似的问题，诀窍是设置 dataSource 状态再次对应于您更改的 rowData.

this.setState({数据源:this.state.dataSource.cloneWithRows(//你的新数据在这里)});

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

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

I am using a ListView as a selector, everything is working but I cannot change the visual state of the element of the list:

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

I change the data directly onPress like this:

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

And I try to change the view like this:

<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>

Where styles.selected and styles.unselected are just 2 different defined styles.

解决方案

I can't tell what your onAreaSelect does here, but I had the similar issue, and the trick is to set dataSource state again corresponding to your changed rowData.

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

For detailed implementation, React Native official ListView example did help me. https://facebook.github.io/react-native/docs/listview.html#examples

In their example, they use another object _pressData to store which row is being selected, and every time it's changed, they call _genRows to do the above.

这篇关于如何更改在 React-Native 中标记的 ListView 项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！