# ReactNativeImageBase64

**Repository Path**: scenario-samples/react-native-image-base64

## Basic Information

- **Project Name**: ReactNativeImageBase64
- **Description**: 部分RN项目需要加载base64格式的图片。

本示例使用@react-native-fast-image实现base64格式的图片的加载。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-25
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 实现base64格式的图片的加载demo

## 场景介绍

部分RN项目需要加载base64格式的图片。

本示例使用[@react-native-fast-image](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-fast-image.md)实现base64格式的图片的加载。

## 效果预览

<img src="screenshots/ReactNativeImageBase64.jpg" width="200">

## 实现思路

1. 加载base64格式的图片

```
<ScrollView>
      <View>
        <FastImage
          style={styles.image}
          source={{
            uri: "data:image/jpeg;base64,/9j//gAQTGF2YzU4LjM1LjEwMAD/2wBDAAgICAkICQsLCwsLCw0MDQ0NDQ0NDQ0NDQ0ODg4REREODg4NDQ4OEBARERITEhERERETExQUFBgYFxccHB0iIin/xACuAAACAwEBAQEAAAAAAAAAAAAABwYFAQIEAwgBAAIDAQEAAAAAAAAAAAAAAAAFBAY",
          }}
          resizeMode={FastImage.resizeMode.contain}
          onLoadStart={() => {
            console.info("onLoadStart: success");
          }}
          onProgress={(e: OnProgressEvent) => {
            console.info(`onProgress: success loaded = ${e.nativeEvent.loaded}, total = ${e.nativeEvent.total}`);
          }}
          onLoad={(e: OnLoadEvent) => {
            console.info(`onLoad: success width = ${e.nativeEvent.width}, height = ${e.nativeEvent.height}`);
          }}
          onError={() => {
            console.info("onError: success");
          }}
          onLoadEnd={() => {
            console.info("onLoadEnd: success");
          }}
        />
      </View>
    </ScrollView>
```

## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0 Release及以上版本进行编译运行。
- 本示例使用0.72.5版本RNOH。

## 工程目录

```
ReactNativeImageBase64                        // RN工程
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──generated                               // codegen自动生成的桥接代码
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  ├──entrybackupability
│  │  │  └──entrybackupability.ets 
│  │  ├──pages
│  │  │  └──Index.ets                            // harmony侧入口
│  │  └──RNPackagesFactory.ets
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──App.tsx                                       // 浏览网页时支持侧滑返回上一页&&导航栏规避
├──index.js                                      // 入口文件
├──metro.config.js                               // 打包配置
```

## 参考文档
[@react-native-fast-image](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-fast-image.md)