14-5 RN之删除realm库中历史数据

在这一节中，我们学习了如何在 Realm 数据库中删除数据，并将删除操作与界面交互结合。

1. 添加删除按钮

我们首先在列表项中添加了一个删除按钮，并为其绑定了点击事件，点击后触发删除操作。

class History extends React.Component {
  renderItem = ({ item, index }: ListRenderItemInfo<IProgram>) => {
    return (
      <View style={styles.item}>
        ...
        <Touchable onPress={() => this.delete(item)} style={styles.deleteBtn}>
          <IconDeleteItemCcAndM />
        </Touchable>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  deleteBtn: {
    padding: 10,
    justifyContent: 'center',
  },
});

2. 实现删除功能

我们在 delete 函数中，使用 realm.write() 来执行删除操作。首先，我们通过 realm.objects() 查找数据库中匹配的项，然后使用 realm.delete() 删除该项。

delete = (item: IProgram) => {
  realm.write(() => {
    const object = realm.objects('Program').filtered(`id='${item.id}'`);
    realm.delete(object);
    // 在删除之后，刷新页面，让组件更新
    this.setState({});
  });
};

3. 页面更新

删除数据后，我们需要确保页面能够及时更新以反映最新的状态。为此，我们调用 this.setState() 来强制组件重新渲染，从而更新显示的列表。

render() {
  const { programs } = this.state;
  return (
    <FlatList data={programs} renderItem={this.renderItem} />
  );
}

总结

在这一节中，我们实现了删除操作，并使得页面能够反映删除后的数据。通过在 Realm 数据库中删除数据，我们能够使用户管理自己的播放历史。

下一节，我们将学习如何更新表结构的相关内容。