react-native上传图片与分享

1. 整体功能：这是一个图片分享应用，允许用户从手机相册选择图片并分享。

2. 主要组件：

   • 使用 SafeAreaView 确保内容在安全区域内显示

   • 使用 TouchableOpacity 创建带有触摸反馈的按钮

   • 使用 Image 组件显示图片

3. 核心功能：

   • 图片选择：使用 expo-image-picker 实现

   • 图片分享：使用 expo-sharing 实现

   • 状态管理：使用 useState 钩子管理图片状态

4. 界面逻辑：

   • 未选择图片时显示默认界面

   • 选择图片后显示预览界面和分享选项

   • 提供重新选择功能

import { useState } from "react";
import { View, Text, Image, TouchableOpacity, SafeAreaView, StyleSheet } from "react-native";

一、图片上传

import * as ImagePicker from "expo-image-picker"  // 用于图片选择功能

export default function App() {
  // 使用 useState 钩子管理图片状态
  const [image, setImage] = useState(null)
  
  // 处理选择图片按钮点击事件
  const handleButtonPress = async () => {
    console.log("图片上传")
    // 请求相册访问权限
    const {status} = await ImagePicker.requestMediaLibraryPermissionsAsync()
    if(status !== "granted"){
      alert("该操作需要设置应用访问权限")
      return
    }

    // 配置并启动图片选择器
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images, // 限制只能选择图片
      allowsEditing: true,    // 允许编辑图片
      aspect: [4,3],          // 设置裁剪比例为 4:3
      quality: 1,             // 设置图片质量为最高
    })

    // 如果用户选择了图片，更新状态
    if(!result.canceled){
      setImage(result.assets[0].uri)
    }
  }

  // 未选择图片时的界面：显示默认图片和选择按钮
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        {<Image source={require("./assets/logo.png")} style={styles.image}/>}
        <Text style={styles.text}>按下按钮，与朋友分享手机中的图片</Text>
        {/* 点击时产生透明度变化的效果 */}
        <TouchableOpacity 
          style={styles.button} 
          onPress={handleButtonPress}
          activeOpacity={0.7} // 点击时的透明度，默认值是 0.2
        >
          <Text style={styles.buttonText}>选择照片</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

二、图片分享

import * as Sharing from "expo-sharing"           // 用于分享功能
...

  //页面切换：
  //已选择图片：显示图片 + 分享
  //未选择图片：显示默认图片 + 选择

  //分享照片
  const handleShare = async () => {
    if (!image) {
      alert('请先选择一张图片');
      return;
    }

    try{
      const isAvailable = await Sharing.isAvailableAsync()

      //不支持分享
      if(!isAvailable){
        alert("该设备不支持分享")
        return
      }

      //分享
      const shareResult = await Sharing.shareAsync(image)
    }catch(error){
      alert('分享失败：' + error.message);
    }
  }
  
    //重新选择
  const handleGoBack = () => {
    setImage(null)
  }
  
  if(image){    
    return (
      <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        {image && <Image source={{uri:image}} style={styles.image}/>}
        <Text style={styles.text}>按下按钮，与朋友分享手机中的图片</Text>
        {/* 分享照片 */}
        <TouchableOpacity 
          style={styles.button} 
          onPress={handleShare}
          activeOpacity={0.7} 
        >
          <Text style={styles.buttonText}>分享照片</Text>
        </TouchableOpacity>
        {/* 重新选择 */}
        <TouchableOpacity 
          style={styles.button} 
          onPress={handleGoBack}
          activeOpacity={0.7} 
        >
          <Text style={styles.buttonText}>重新选择</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
    )
  }

...