如何将ListView项更改为在React-Native中标记

Question

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

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

我直接在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只有两种不同的定义风格。

Answer 1

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

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来执行上述操作。