我如何更新列表视图的 1 行@Shoutem/ui react native

Question

我尝试使用@shoutem/ui的ListView 我通过 API 获取的 ListView 数据，响应是一个数组对象！在 1 个对象中有 1 个键值，例如带参数的状态 (follow/unfollow)！如果参数跟随我用满星渲染行，否则我用空星定义但现在我想点击一行！我想将空星更改为满星或相反，同时将行的 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>
  );
}

然后，如果您的对象需要在服务器上更新，您将需要 post 在您的 API 中的 updateObjectStatus 函数中，并从服务器刷新数据。如果您使用 redux 操作在应用程序状态中本地更新对象状态。这两种情况都会导致您的数据发生变化，因此会导致您的 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 react native

How i can update 1 row of list view @Shoutem/ui react native

react-native

shoutem