React Native页面跳转后如何保留已上传的媒体内容？

我开发的App主页包含6个视图，部分具备CRUD功能：

• 视频视图：支持上传YouTube链接并生成缩略图，点击可跳转至视频
• 图片视图：支持从相册上传图片并创建幻灯片

但目前存在问题：用户上传图片后返回主页，再进入图片视图时，上传的图片消失——页面路由切换时无法保存状态。Web端我会用session storage存储新上传的媒体，但不清楚React Native中如何实现，希望得到解决方案。

附上图片视图相关代码：

export default function ImagePickerExample() {
  const [images, setImages] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0); // Track current image index

  const pickImage = async () => {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });

      if (!result.canceled) {
        setImages([...images, ...result.assets.map((asset) => asset.uri)]);
      }
    };

  return (
    <>
      <Pressable style={styles.iconContainer} onPress={pickImage}>
        <Image
          source={require("../assets/images/upload_img.png")}
          style={styles.uploadButton}
        />
      </Pressable>

      <View>
        {images.length > 0 && (
          <FlatList
            horizontal
            data={images}
            keyExtractor={(imageUri) => imageUri}
            renderItem={({ item, index }) => (
              <Pressable
                onPress={() => openModal(index)}
                style={styles.container}
              >
                <Image source={{ uri: item }} style={styles.image} />
              </Pressable>
            )}
          />
        )}
      </View>
    </>
  );
}

在React Native中，常用的本地存储方案有以下几种，针对你的场景推荐优先使用MMKV或AsyncStorage：

1. 使用MMKV（推荐，性能更优） #

MMKV是腾讯开源的高效键值存储库，比AsyncStorage更快更稳定。

步骤： #

• 安装依赖：

npm install react-native-mmkv
# 或者 yarn add react-native-mmkv

• 修改图片视图代码，实现存储与读取：

import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

export default function ImagePickerExample() {
  // 从MMKV读取初始图片列表，若无则设为空数组
  const [images, setImages] = useState(() => {
    const savedImages = storage.getString('savedImages');
    return savedImages ? JSON.parse(savedImages) : [];
  });
  const [currentIndex, setCurrentIndex] = useState(0);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      const newImages = [...images, ...result.assets.map((asset) => asset.uri)];
      setImages(newImages);
      // 将新数组存入MMKV
      storage.set('savedImages', JSON.stringify(newImages));
    }
  };

  // 其余代码不变...
}

2. 使用AsyncStorage（官方维护的键值存储） #

AsyncStorage是React Native官方提供的异步键值存储API，适合轻量数据存储。

步骤： #

• 安装依赖：

npm install @react-native-async-storage/async-storage
# 或者 yarn add @react-native-async-storage/async-storage

• 修改代码实现：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect } from 'react';

export default function ImagePickerExample() {
  const [images, setImages] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);

  // 组件挂载时读取存储的图片
  useEffect(() => {
    const loadSavedImages = async () => {
      try {
        const savedImages = await AsyncStorage.getItem('savedImages');
        if (savedImages) {
          setImages(JSON.parse(savedImages));
        }
      } catch (e) {
        console.error('读取图片失败:', e);
      }
    };
    loadSavedImages();
  }, []);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      const newImages = [...images, ...result.assets.map((asset) => asset.uri)];
      setImages(newImages);
      // 存入AsyncStorage
      try {
        await AsyncStorage.setItem('savedImages', JSON.stringify(newImages));
      } catch (e) {
        console.error('保存图片失败:', e);
      }
    }
  };

  // 其余代码不变...
}

注意事项 #

• 以上存储的是图片的本地URI，若App卸载或图片被系统清理，URI会失效。如果需要长期保存，建议将图片上传到云端存储，然后存储云端URL。
• 若需要清除存储的图片列表，可调用对应存储的删除方法：
  • MMKV：storage.delete('savedImages')
  • AsyncStorage：await AsyncStorage.removeItem('savedImages')

内容的提问来源于stack exchange，提问作者freekickerz Romania