Question

我尝试使用@ shoutem / ui的ListView ListView数据我通过API得到，响应是一个数组对象！在1个对象中有1个键值，如params的状态（follow / unfollow）！如果跟着params我用全星渲染行，或者不用空星定义但现在我想点击一行！我想将空星改为全星或相反，同时将行的id保存到一个数组列表！那么任何人都能给我一个解决方案？非常感谢你的帮助！祝你有愉快的一天这是我的照片： enter image description here

Answer 1

您必须处理作为一行呈现的内部组件。让我们说你像这样渲染你的行：

renderRow(object) {
  const iconName = object.status === 'follow' ? 'add-to-favorites-full' : 'add-to-favorites';
  return (
    <Row>
      <Image
        styleName="small rounded-corners"
        source={{ uri: object.imageUrl }}
      />
      <View styleName="vertical stretch space-between">
        <Subtitle>object.name</Subtitle>
        <Caption>object.status</Caption>
      </View>
      <Button styleName="right-icon" onPress={() => this.updateObjectStatus(object)}><Icon name={iconName} /></Button>
    </Row>
  );
}

然后，如果您的对象需要在服务器上更新，则需要在updateObjectStatus函数内的API上发布该对象并从服务器刷新数据。如果您使用redux操作在app状态下本地更新对象状态。这两种情况都会导致数据更改，从而导致ListView的新渲染。现在将渲染你用全星点击的行。

此屏幕可能对您有所帮助：https://github.com/shoutem/extensions/blob/master/shoutem-books/app/screens/BooksListScreen.js

它处理这两个组件内部：

列出行组件：https://github.com/shoutem/extensions/blob/master/shoutem-books/app/components/ListBooksView.js
收藏夹按钮：https://github.com/shoutem/extensions/blob/master/shoutem-books/app/components/Favorite.js

我如何更新1行列表视图@ Shoutem / ui本地反应

1 个答案: