react-native - 我如何更新 1 行列表视图 @Shoutem/ui 反应原生

Question

我尝试使用通过 API 获得的 @shoutem/ui ListView 数据的 ListView，响应是一个数组对象！在 1 个对象内部有 1 个键值，例如带参数的状态（关注/取消关注）！如果参数是跟随我用满星渲染行，或者不是我用空星定义但现在我想点击一行！我想将空星更改为全星或相反，同时将行的 ID 保存到一个数组列表！所以任何人都可以给我一个解决方案？非常感谢你的帮助！祝你有美好的一天 这是我的照片： 在此处输入图像描述

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>
  );
}

然后，如果您的对象需要在服务器上更新，您需要将其发布在您的 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