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

Question

我使用a 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仅有2种不同的定义样式.

Answer 1

我不知道你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以执行上述操作。