如何在React Native/Expo应用中添加「设为壁纸」功能？

我来帮你解决这个问题——你之前用react-native-wallpaper-manager没生效，大概率是因为Expo托管项目和裸机项目的差异导致的，下面分情况给你可行的方案：

一、Expo托管工作流（Managed Workflow） #

方法1：通过系统分享让用户完成设置（最简单，无需原生配置） #

这个方案不需要修改原生代码，兼容性拉满，唯一的小缺点是需要用户手动选择「设为壁纸」选项，但对于托管项目来说是最稳妥的：

首先安装需要的依赖：

npx expo install expo-file-system expo-sharing

然后编写代码逻辑（假设你已经能下载图片到本地）：

import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

// 传入图片的远程URL或者本地URI
const handleSetAsWallpaper = async (imageSource) => {
  let localUri;
  
  // 如果是远程URL，先下载到本地
  if (imageSource.startsWith('http')) {
    localUri = `${FileSystem.documentDirectory}temp-wallpaper.jpg`;
    try {
      await FileSystem.downloadAsync(imageSource, localUri);
    } catch (err) {
      alert('图片下载失败：' + err.message);
      return;
    }
  } else {
    // 已经是本地URI，直接使用
    localUri = imageSource;
  }

  // 检查设备是否支持分享功能
  const canShare = await Sharing.isAvailableAsync();
  if (canShare) {
    // 弹出分享面板，用户可以选择系统的「设为壁纸」选项
    await Sharing.shareAsync(localUri, {
      dialogTitle: '选择操作',
      mimeType: 'image/jpeg', // 根据你的图片格式调整
    });
  } else {
    alert('当前设备不支持分享功能');
  }
};

方法2：使用Config Plugin实现自动设置（需要EAS Build） #

如果你希望直接通过代码自动设置壁纸，不需要用户手动操作，那可以用社区提供的Config Plugin来适配Expo托管项目：

1. 安装依赖：

npm install react-native-wallpaper-manager expo-config-plugin-wallpaper-manager

2. 在app.json或app.config.js中添加插件配置：

{
  "expo": {
    "plugins": [
      "expo-config-plugin-wallpaper-manager"
    ]
  }
}

3. 重新构建项目（注意：这个方法不能用Expo Go预览，必须使用EAS Build来构建自定义的开发包或者生产包）：

eas build --platform android,ios

4. 使用库的API设置壁纸：

import WallpaperManager from 'react-native-wallpaper-manager';

const setWallpaperDirectly = async (localUri) => {
  try {
    // 参数说明：第一个是本地图片URI，第二个是是否设置为锁屏壁纸（true=锁屏，false=主屏幕）
    await WallpaperManager.setWallpaper(localUri, true);
    alert('壁纸设置成功！');
  } catch (error) {
    alert('设置失败：' + error.message);
  }
};

二、Expo裸机工作流（Bare Workflow） #

如果你已经将项目 eject 为裸机模式，那直接配置原生权限后使用react-native-wallpaper-manager即可：

1. 安装库：

npm install react-native-wallpaper-manager

2. 配置原生权限：

• iOS：在Info.plist中添加权限描述：

<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要访问相册权限来设置壁纸</string>

• Android：在AndroidManifest.xml中添加权限：

<uses-permission android:name="android.permission.SET_WALLPAPER" />

3. 然后就可以使用和上面方法2一样的API代码来设置壁纸了。

为什么你之前用react-native-wallpaper-manager没生效？ #

大概率是因为你用的是Expo托管项目（Managed Workflow），这个库是原生模块，Expo Go不支持加载自定义原生模块，所以直接安装后调用会失效。必须用上面的方法1（分享）或者方法2（Config Plugin+EAS Build）才能正常工作。

内容的提问来源于stack exchange，提问作者Nilesh Kant