# ReactNativeImage

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

## Basic Information

- **Project Name**: ReactNativeImage
- **Description**: 在应用开发中，经常需要加载并展示图片资源。

 本示例使用Image实现从RN和Harmony工程的本地文件中加载并展示图片。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RN使用Image加载本地图片

## 场景介绍

在应用开发中，经常需要加载并展示图片资源。

本示例使用Image实现从RN和Harmony工程的本地文件中加载并展示图片。

## 效果预览
<img src="screenshots/ReactNativeImage.gif" width="200">

## 实现思路

Image加载应用本地图片：
RNOH应用本地图片分为RN工程本地图片和HarmonyOS工程本地资源图片。
Image加载RN工程本地图片：
RN工程本地图片需要通过require声明，以便打包工具在构建应用时将图片资源编译进应用包中。
```
<Image
  style={{width: 200, height: 200}}
  source={require('./assets/ImageFromRN.jpg')}
/>
```
Image加载HarmonyOS工程本地资源图片：
将图片存储在HarmonyOS工程rawfile资源目录下，通过以resource://RAWFILE为前缀，图片相对于rawfile资源目录的相对路径为后缀，拼接而成进行加载。
```
<Image
  style={{width: 200, height: 200}}
  source={{uri:'resource://RAWFILE/assets/ImageFromHarmony.jpg'}}
/>
```

## 约束与限制

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

## 工程目录

```
ReactNativeImage                                 // RN工程
├──assets                                        // RN本地资源文件
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──generated                               // codegen自动生成的桥接代码
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  ├──pages
│  │  │  └──Index.ets                            // harmony侧入口
│  │  └──RNPackagesFactory.ets
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──App.tsx                                       // Image展示本地图片示例
├──index.js                                      // 入口文件
└──metro.config.js                               // 打包配置
```

## 参考文档
[RNOH使用文档](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md)