React Native拍照后保存至iPhone本地或跨屏传递的无数据库方案

针对你的需求，这里提供两种轻量级本地方案，无需数据库，适合UI/UX测试阶段：

一、直接跨页面传递照片（无需保存到相册） #

利用React Navigation的参数传递功能，拍摄后直接将照片的本地临时URI传给目标页面，步骤如下：

1. 修改拍照逻辑，添加跳转按钮
   在你的CameraScreen组件中，给照片预览区域添加跳转按钮，点击后传递照片URI：

// 补充导入组件（如果未导入）
import { TouchableOpacity, Text } from 'react-native';

// 保持原有拍照逻辑不变
const takePhoto = async () => {
  if (cameraRef.current) {
    const { uri } = await cameraRef.current.takePictureAsync();
    setPhoto(uri); // 保存本地临时URI
  }
};

// 修改照片预览的JSX部分，增加跳转按钮
{photo && (
  <View style={styles.photoPreviewContainer}>
    <Image source={{ uri: photo }} style={styles.photoPreview} />
    <TouchableOpacity 
      onPress={() => navigation.navigate('目标页面名称', { photoUri: photo })}
      style={{ marginTop: 20, padding: 12, backgroundColor: '#007AFF', borderRadius: 8 }}
    >
      <Text style={{ color: 'white', fontSize: 16, textAlign: 'center' }}>传递到下一页</Text>
    </TouchableOpacity>
  </View>
)}

2. 在目标页面接收照片
   在目标页面通过route.params获取传递的URI并展示：

const TargetScreen = ({ route }) => {
  const { photoUri } = route.params;

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Text style={{ fontSize: 18, marginBottom: 10 }}>接收的照片：</Text>
      <Image 
        source={{ uri: photoUri }} 
        style={{ width: '100%', height: 300, borderRadius: 8 }} 
      />
    </View>
  );
};

二、保存到iPhone相册后传递/本地存储 #

如果需要将照片持久化到系统相册，可使用Expo的MediaLibrary模块，同时结合参数传递或AsyncStorage实现跨页访问：

步骤1：添加相册权限与保存逻辑 #

导入MediaLibrary并修改拍照函数，实现照片保存到相册：

import * as MediaLibrary from 'expo-media-library';

// 在原有useEffect中补充请求相册权限
useEffect(() => {
  (async () => {
    // 请求相机权限（原有逻辑）
    const cameraStatus = await Camera.requestPermissionsAsync();
    setHasPermission(cameraStatus.status === 'granted');
    
    // 请求相册访问权限
    await MediaLibrary.requestPermissionsAsync();
  })();
}, []);

// 修改拍照函数，拍完后保存到系统相册
const takePhoto = async () => {
  if (cameraRef.current) {
    const { uri } = await cameraRef.current.takePictureAsync();
    
    try {
      // 将照片保存到系统相册，返回永久访问的asset对象
      const asset = await MediaLibrary.createAssetAsync(uri);
      // 用相册中的永久URI替换临时URI
      setPhoto(asset.uri);
    } catch (error) {
      console.error('保存到相册失败:', error);
    }
  }
};

步骤2：跨页传递或本地持久化 #

• 跨页传递：和方案一逻辑一致，通过navigation.navigate传递asset.uri即可，目标页面接收方式相同。
• 本地持久化（可选）：如果需要重启APP后仍能访问照片，可使用AsyncStorage存储相册URI：

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

// 拍照保存时同步存储到本地
const takePhoto = async () => {
  if (cameraRef.current) {
    const { uri } = await cameraRef.current.takePictureAsync();
    
    try {
      const asset = await MediaLibrary.createAssetAsync(uri);
      setPhoto(asset.uri);
      // 将相册URI存储到本地
      await AsyncStorage.setItem('savedPhotoUri', asset.uri);
    } catch (error) {
      console.error('保存失败:', error);
    }
  }
};

// 在其他页面读取存储的照片URI
const OtherScreen = () => {
  const [savedPhoto, setSavedPhoto] = useState(null);

  useEffect(() => {
    const fetchSavedPhoto = async () => {
      const uri = await AsyncStorage.getItem('savedPhotoUri');
      if (uri) setSavedPhoto(uri);
    };
    fetchSavedPhoto();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {savedPhoto ? (
        <Image source={{ uri: savedPhoto }} style={{ width: 250, height: 250, borderRadius: 8 }} />
      ) : (
        <Text>暂无保存的照片</Text>
      )}
    </View>
  );
};

注意事项 #

• Expo相机生成的临时URI在APP重启后会失效，若需持久化必须保存到系统相册，或存储相册的永久URI。
• 确保项目中已安装@react-native-async-storage/async-storage（Expo项目可直接使用）。

内容的提问来源于stack exchange，提问作者Alina Luzanova