React Native 开源鸿蒙开发（Day11-12）：收藏功能持久化与三方库适配实战

同时结合开源鸿蒙的工程特性，完成功能与终端的适配验证。本文贴合发文要求，重点分享问题排查、三方库适配、状态持久化的技术思路，避免纯流程性内容。三方库适配原则：RN + 鸿蒙开发中，必须选用 “开源鸿蒙已兼容” 的三方库版本，避免版本不兼容问题；鸿蒙工程特性：鸿蒙工程的依赖配置需同步oh-package.json5，与 RN 工程的package.json分开管理。

油饼十八112

552人浏览 · 2026-02-03 14:37:54

油饼十八112 · 2026-02-03 14:37:54 发布

一、前言

在 RN + 开源鸿蒙跨平台开发的 Day11-12 阶段，核心聚焦 “收藏功能状态丢失” 的问题解决，通过接入鸿蒙适配版react-native-async-storage三方库，实现收藏状态的本地持久化；同时结合开源鸿蒙的工程特性，完成功能与终端的适配验证。本文贴合发文要求，重点分享问题排查、三方库适配、状态持久化的技术思路，避免纯流程性内容。

二、核心开发背景：收藏状态丢失的痛点

在前期开发中，食谱列表的 “收藏” 功能仅通过页面状态临时存储，切换页面后状态会被重置 —— 这是 RN 跨平台开发中 “内存态数据未持久化”的典型问题。需通过本地缓存工具（鸿蒙适配的三方库）实现数据的持久化存储，同时解决 “三方库与鸿蒙 SDK 版本兼容” 的问题。

三、技术实现：三方库适配与状态持久化

3.1 鸿蒙适配版react-native-async-storage接入

3.1.1 核心适配问题

普通 RN 版本的react-native-async-storage未适配鸿蒙 SDK，直接安装会出现 “编译失败”、“模块找不到” 的问题。因此需选择开源鸿蒙已兼容的三方库版本，并同步配置工程依赖。

3.1.2 接入关键步骤

版本选择：选用开源鸿蒙兼容清单中推荐的react-native-async-storage@1.21.0（已完成鸿蒙适配）；
工程同步：安装后更新鸿蒙工程的oh-package.json5，将库添加至dependencies节点，确保鸿蒙编译工具识别依赖；
权限适配：无需额外权限（本地缓存属于应用沙箱内操作），但需确保工程已声明网络权限（不影响本地存储功能）。

3.2 收藏状态持久化的核心逻辑

通过 “本地缓存读写 + 页面状态联动”，实现收藏状态的持久化与自动恢复，核心代码逻辑如下：

3.2.1 封装AsyncStorage工具类

// utils/storage.js
import AsyncStorage from '@react-native-async-storage/async-storage';

// 收藏数据的Key
const FAVORITE_KEY = 'recipe_favorites';

// 读取所有收藏数据
export const getFavorites = async () => {
  const data = await AsyncStorage.getItem(FAVORITE_KEY);
  return data ? JSON.parse(data) : [];
};

// 添加/移除收藏
export const toggleFavorite = async (recipe) => {
  const favorites = await getFavorites();
  const index = favorites.findIndex(item => item.id === recipe.id);
  
  if (index > -1) {
    // 已收藏：移除
    favorites.splice(index, 1);
  } else {
    // 未收藏：添加
    favorites.push(recipe);
  }
  
  await AsyncStorage.setItem(FAVORITE_KEY, JSON.stringify(favorites));
  return favorites;
};

3.2.2 食谱卡片的收藏交互

// components/RecipeCard.js
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { getFavorites, toggleFavorite } from '../utils/storage';

const RecipeCard = ({ recipe }) => {
  const [isFavorite, setIsFavorite] = useState(false);

  // 页面加载时，从本地缓存恢复收藏状态
  useEffect(() => {
    const initFavorite = async () => {
      const favorites = await getFavorites();
      setIsFavorite(favorites.some(item => item.id === recipe.id));
    };
    initFavorite();
  }, [recipe.id]);

  // 点击收藏按钮：更新状态+本地缓存
  const handleFavorite = async () => {
    await toggleFavorite(recipe);
    setIsFavorite(!isFavorite);
  };

  return (
    <View style={styles.card}>
      <Image source={{ uri: recipe.cover }} style={styles.cover} />
      <Text style={styles.title}>{recipe.title}</Text>
      <TouchableOpacity onPress={handleFavorite}>
        <Image
          source={isFavorite ? require('../assets/star-filled.png') : require('../assets/star-empty.png')}
          style={styles.starIcon}
        />
      </TouchableOpacity>
    </View>
  );
};

3.2.3 “我的收藏” 页面的数据联动

// pages/MyFavorites.js
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import { getFavorites } from '../utils/storage';
import RecipeCard from '../components/RecipeCard';

const MyFavorites = () => {
  const [favorites, setFavorites] = useState([]);

  useEffect(() => {
    const loadFavorites = async () => {
      const data = await getFavorites();
      setFavorites(data);
    };
    loadFavorites();
  }, []);

  if (favorites.length === 0) {
    return (
      <View style={styles.emptyContainer}>
        <Text style={styles.emptyText}>暂无收藏食谱，快去收藏喜欢的内容吧~</Text>
      </View>
    );
  }

  return (
    <FlatList
      data={favorites}
      renderItem={({ item }) => <RecipeCard recipe={item} />}
      keyExtractor={item => item.id}
    />
  );
};