javascript - React Native Listview 选定样式

Question

我有什么

我有一个 React Native 的 ListView ，它通过 Firebase 进行水合作用。我显示此 ListView ，当我触摸所需的行时，它将数据发送回父级，然后我以其他方式保存和操作数据，这样就可以了。

我的目标

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

我的问题

我该如何创建此功能？它与 Web 中的单选按钮非常相似，但在 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
})
},

很长一段时间以来，我一直在努力反对这个问题。任何帮助或想法都将非常有值(value)。

Answer 1

诀窍是您需要为 ListView 重新渲染整个数据源。不幸的是，仅仅更新组件的状态并不会使 ListView 重新评估其中的行。请参阅以下内容以获取更多信息:

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