React Native如何设置手机系统壁纸并按日期自动切换背景

React Native 框架本身没有提供操作系统级壁纸的内置API，需要通过封装原生能力的模块实现，iOS和安卓的权限、能力限制差异较大，以下是可直接落地的实现步骤：

核心依赖安装 #

首先安装两个必要的依赖：

• 封装了安卓、iOS原生壁纸设置能力的社区模块，安装命令：

  npm install react-native-wallpaper-manager
  # 或者使用yarn
  yarn add react-native-wallpaper-manager
  

• 本地文件处理工具，用来解决安卓高版本系统下相册content URI无法直接被原生模块读取的权限问题，安装命令：

  npm install react-native-fs
  yarn add react-native-fs
  

原生端配置 #

• 安卓端：在项目android/app/src/main/AndroidManifest.xml文件中添加壁纸设置权限：

  <uses-permission android:name="android.permission.SET_WALLPAPER" />
  <!-- 安卓13及以上版本需要额外添加图片读取权限 -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

• iOS端：注意系统级限制：
  • iOS 16以下系统完全不开放第三方App设置壁纸的接口，只能引导用户手动保存图片到相册自行设置，无绕过方案
  • iOS 16及以上系统不允许App静默修改壁纸，调用设置接口时系统会弹出确认弹窗，需要用户手动确认后才能生效

壁纸设置工具方法封装 #

新建工具文件，写入通用的壁纸设置逻辑，直接适配你存储的三个全局图片URI：

import WallpaperManager from 'react-native-wallpaper-manager';
import { PermissionsAndroid, Platform, Alert } from 'react-native';
import RNFS from 'react-native-fs';

// 申请安卓端壁纸设置权限
const requestWallpaperPermission = async () => {
  if (Platform.OS !== 'android') return true;
  const permissionList = [
    PermissionsAndroid.PERMISSIONS.SET_WALLPAPER,
  ];
  // 安卓13以上追加图片读取权限
  if (Platform.Version >= 33) {
    permissionList.push(PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES);
  }
  const granted = await PermissionsAndroid.requestMultiple(permissionList);
  return Object.values(granted).every(item => item === PermissionsAndroid.RESULTS.GRANTED);
};

/**
 * 设置系统桌面壁纸
 * @param {string} imgUri 本地图片路径，支持相册返回的content:// 格式URI
 * @returns {boolean} 是否设置成功
 */
export const setSystemWallpaper = async (imgUri) => {
  if (!imgUri) return false;
  const hasPermission = await requestWallpaperPermission();
  if (!hasPermission) {
    Alert.alert('权限不足', '请授予壁纸设置和图片读取权限后重试');
    return false;
  }
  try {
    let realImgPath = imgUri;
    // 处理安卓高版本content URI无法直接访问的问题
    if (imgUri.startsWith('content://')) {
      const cachePath = `${RNFS.CachesDirectoryPath}/temp_wallpaper_${Date.now()}.jpg`;
      await RNFS.copyFile(imgUri, cachePath);
      realImgPath = `file://${cachePath}`;
    }
    // 执行壁纸设置，HOME代表仅设置桌面，需要同时设置锁屏可改为BOTH
    await WallpaperManager.setWallpaper({
      uri: realImgPath,
      screen: WallpaperManager.SCREEN.HOME
    });
    return true;
  } catch (err) {
    console.error('壁纸设置失败：', err);
    Alert.alert('设置失败', '请检查图片是否有效或重试');
    return false;
  }
};

按日期自动切换逻辑实现 #

前台触发（双端通用） #

直接在App入口组件中加入日期判断逻辑，App启动时自动匹配对应日期的图片设置为壁纸，你之前写的应用内背景组件不需要修改，两套逻辑独立运行互不影响：

import React, { useEffect } from 'react';
import { View } from 'react-native';
import BackgroundImg from '../components/Background_image';
import global from '../components/global';
import { setSystemWallpaper } from './utils/wallpaper';

const App = () => {
  useEffect(() => {
    // 获取当前日期，按每3天循环匹配三张图片，可根据自己的规则修改判断逻辑
    const currentDay = new Date().getDate();
    let targetImage = '';
    const modResult = currentDay % 3;
    if (modResult === 1) {
      targetImage = global.frstImgURI;
    } else if (modResult === 2) {
      targetImage = global.secImgURI;
    } else {
      targetImage = global.thrdImgURI;
    }
    // 执行壁纸设置
    if (targetImage) {
      setSystemWallpaper(targetImage);
    }
  }, []);

  return (
    <View>
      <BackgroundImg />
    </View>
  );
};
export default App;

后台定时触发（仅安卓支持） #

iOS完全禁止第三方App在后台静默修改系统配置，无法实现后台自动切换。安卓端可通过后台任务模块注册每日定时任务，在每天0点自动执行上述日期判断和壁纸设置逻辑，需要注意部分定制安卓系统会默认拦截第三方App后台任务，需要引导用户将App加入电池优化白名单、允许后台运行才能保证定时任务稳定执行。

其他说明 #

• 你之前实现的应用内背景逻辑和系统壁纸设置逻辑完全独立，不需要做任何修改
• 如果设置壁纸时出现图片加载失败，优先检查图片URI是否有效、是否授予了对应的文件读取权限
• 不要尝试通过任何hack手段绕过iOS的权限限制，这类应用会被App Store直接拒绝上架

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