React Native Listview选择样式

Question

我拥有什么

我有一个listview in react native，从firebase补充水分。我显示了这个列表视图，当我触摸所需的行时，它会将数据发送回父级，然后我以其他方式保存和操作数据，这样一切正常。

我的目标

我希望与最终用户进行更多互动。当用户触摸所需的行时，我希望该行显示复选标记。当他们触摸另一行时，我希望复选标记位于该特定行上。

我的问题

如何创建此功能？它与网络中的单选按钮非常相似，但在React Native中我还没有看到类似的功能。现在，我可以显示列表，然后触摸所需的行，它将显示该特定行的图标。但是，再次选择后它不会恢复到原来的状态。

我的代码

渲染list.js

<TouchableHighlight onPress={ ()=> this.combine(this.props.title)}>
<View style={styles.settingsWrapper}>

    <View style={styles.settingsName}>
        <Text style={styles.settingsTitle}>{this.props.title}</Text>
    </View>
    <View style={styles.settingsImage}>

        <Icon name={this.setStyle(this.props.title)} style={{fontSize:30, color: '#2ecc71'}}></Icon>



    </View>

</View>
</TouchableHighlight>

setStyle函数

  setStyle: function(medName) {

  if (this.state.selectedMed == this.props.title) {
      return 'cab'
  } else {
      return 'check'
  }
},

合并功能

  combine:function(selectedMedication){
this.props.callback(selectedMedication);
this.setState({
  selectedMed:selectedMedication
})
},

我长期以来一直在反对这一点。任何帮助或想法都会受到极大的重视。

Answer 1

诀窍是你需要为列表视图重新渲染整个数据源。不幸的是，仅仅更新组件的状态不会使列表视图重新评估其中的行。有关详细信息，请参阅以下内容：

How to change a ListView Item as Marked In React-Native