React Native Listview选定的样式 [英] React Native Listview selected styling

问题描述

我在从Firebase补水的react native中有一个listview.我显示此列表视图，当我触摸所需的行时，它将数据发送回父级，然后在父级中以其他方式保存和操作数据，因此一切正常.

I have a listview in react native that is hydrating from firebase. I display this listview, and when I touch the desired row, it sends the data back to the parent where I then save and manipulate the data in other ways, so that's all working.

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

I want more interactivity with the end users. When a user touches the desired row, I want the row to show a checkmark. When they touch a different row, I want the checkmark to be on that particular row.

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

How do I go about creating this feature? It's very similar to radio buttons in web, but in React Native I haven't seen a feature like that yet. Right now, I can display the list and then touch a desired row and it will show a icon for that particular row. However, it will not go back to its original state after selecting it again.

呈现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
})
},

我已经很久没碰到这个了.任何帮助或想法都将得到极大的重视.

I've been banging my head against this for a long time. Any help or ideas would be greatly valued.

推荐答案

诀窍是您需要重新呈现列表视图的整个数据源.不幸的是，仅更新组件的状态并不能使列表视图重新评估其中的行.有关更多信息，请参见以下内容:

The trick is you need to re-render your entire data source for the list view. Unfortunately just simply updating the state of the component doesn't make the list view re-evaluate the rows therein. See the following for a bit more info:

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

这篇关于React Native Listview选定的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！