前端

### 背景介绍

在许多React Native应用中，用户通常希望能够保存图片到设备的相册中。本文将介绍如何使用React Native的CameraRoll组件和相关的API，实现保存图片到相册的功能。  

### 步骤1：安装依赖

首先，确保您的React Native项目已经正确配置和运行。然后，通过以下命令安装所需的依赖：

```javascript
npm install @react-native-community/cameraroll
npm install react-native
npm install react-native-fs
```

### 步骤2：导入所需的模块

在需要使用保存图片功能的组件中，导入所需的模块：

```typescript
import { Platform } from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import RNFS from 'react-native-fs';

```

### 步骤3：请求相册访问权限（兼容IOS和android）

**需要注意**

1. 使用CameraRoll安卓端在保存前需要请求权限，iOS端使用该方法会默认请求权限
2. 安卓端保存图片，只接受本地图片，所以需要先存在本地

```javascript
import { useCallback } from 'react';
import { PermissionsAndroid, Platform } from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import RNFS from 'react-native-fs';
import { getI18n, useTranslation } from 'react-i18next';

const hasAndroidPermission = async () => {
  if (Number(Platform.Version) >= 33) {
   // 版本33及以上默认拥有写入权限
    return true;
  }
  const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
  const hasPermission = await PermissionsAndroid.check(permission);
  if (hasPermission) {
    return true;
  }

  const status = await PermissionsAndroid.request(permission);
  return status === 'granted';
};

export const useParticipationQrCode = () => {
  const { t } = useTranslation();

	// 保存到相册
  const saveToAlbum = useCallback(
    async (event) => {
      const { action, payload } = event;
      if (action === 'savetoalbum') {
        if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
          return Toast({ message: getI18n().t('Home:failed_to_save_qr_code_content') });
        }
        try {
          const base64Data = payload?.url?.replace(/^data:image\/\w+;base64,/, '');
          const timestamp = Date.now();
          const fileName = `image_${timestamp}.png`;
           // 注意 安卓端保存图片，只接受本地图片，所以需要先存在本地
          const filePath = `${RNFS.CachesDirectoryPath}/${fileName}`;
          await RNFS.writeFile(filePath, base64Data, 'base64');
          await CameraRoll.save(filePath, { type: 'photo' });
          // 保存好之后删除之前写入的本地图片
          await RNFS.unlink(filePath);
          Toast({ message: t('Home:save_qr_code_content_successfully') });
        } catch (error) {
          console.log('Failed to save image.', error);
        }
      }
    },
    [t],
  );

  return {
    saveToAlbum,
  };
};
```


在许多ReactNative应用中，用户通常希望能够保存图片到设备的相册中。本文将介绍如何使用ReactNative的CameraRoll组件和相关的API，实现保存图片到相册的功能。步骤1：安装依赖首先，确保您的ReactNative项目已经正确配置和运行。然后，通过以下命令安装所需的依赖：npminstall@react-native-community/camerarollnpmin

React Native 保存图片到手机相册，同时支持IOS&安卓

## react native 本地推送消息(IOS)

#### 本文将介绍 notifee（5.7.0版本）的使用

> 为什么不用最新版本呢？
>
> IOS OnNotificationOpenedApp 和来自 RNFB Messaging 的 getInitialNotification 将不再触发，因为 notifee 将处理此事件。 Android 上的事件将继续正常工作
>
> 由于遇到了本地推送跟远程推送的冲突 导致iOS 远程推送的消息无法接收到。所以为了本地推送跟远程推送正常运行，降低版本至5.7.0

#### 环境支持

![](https://cdn.fmlg1688.cn/levenx-world/AeWky2oi8QjmRb-5.png)

#### 下载

* ```bash
  yarn add @notifee/react-native
  ```
* ```bash
  npm install --save @notifee/react-native
  ```

#### 使用

```ts

import notifee, {
  TimestampTrigger,
  TriggerType,
  AuthorizationStatus,
} from '@notifee/react-native'

export const scheduleLocalNotification = async (
  data: dataType[]
): Promise<boolean> => {
  try {
    // reset notification
    await notifee.cancelAllNotifications()
    const filterData = data?.filter(
      (item) => new Date(item.date).getTime() > Date.now()
    )
    for (const item of filterData) {
      const { title, message, date, notificationSoundType } = item
        // Create a time-based trigger
        const trigger: TimestampTrigger = {
          type: TriggerType.TIMESTAMP,
          timestamp: new Date(date).getTime(),
        }
        // Create a trigger notification
        await notifee.createTriggerNotification(
          {
            title,
            body: message,
            ios:
              notificationSoundType === 'SILENT'
                ? {}
                : {
                    sound: IosSoundType[notificationSoundType],
                  },
          },
          trigger
        )
    }
    return true
  } catch (err) {
    console.error('something wrong when scheduling local notification.', err)
    return false
  }
}
```

> 如果想设置自定义的铃声，将mp3文件放置在ios文件目录下，并在下方xcode位置添加文件，项目文件 .xcodeproj后缀文件下应该包含该音频文件 上方代码设置sound: 'custom\_ios.mp3' （名称需要与自定义名称一致，这边只是举例用了custom\_ios.mp3） 则为自定义的铃声文件
>
> ![](https://cdn.fmlg1688.cn/levenx-world/Bqx6mEQsvGPrb_q3.png)


reactnative本地推送消息(IOS)本文将介绍notifee（5.7.0版本）的使用为什么不用最新版本呢？IOSOnNotificationOpenedApp和来自RNFBMessaging的getInitialNotification将不再触发，因为notifee将处理此事件。Android上的事件将继续正常工作由于遇到了本地推送跟远程推送的冲突导致iOS远程推送的消息无法接收到。所以为

react native 本地推送消息(IOS)

客户端

服务端

算法

工程

产品

信息安全

运维

React Native 是一个由 Facebook 开发的开源框架，它允许开发人员使用 JavaScript 和 React 构建原生移动应用程序。它使用与 React 类似的组件和声明式的编程模型，能够为 iOS 和 Android 平台创建性能优异的用户界面。