# ReactNativeRedirect

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

## Basic Information

- **Project Name**: ReactNativeRedirect
- **Description**: 在应用开发中，常常需要跳转至其他页面，比如跳转至应用市场、系统浏览器、系统短信页面以及使用WebView跳转至系统电话页面。 本示例使用Linking.openURL跳转至跳转至应用市场、系统浏览器、系统短信页面，使用window.location.href='tel:'跳转至系统电话页面。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-11
- **Last Updated**: 2025-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ReactNative重定向至其他页面

## 场景介绍

在应用开发中，常常需要跳转至其他页面，比如跳转至应用市场、系统浏览器、系统短信页面以及使用WebView跳转至系统电话页面。

本示例使用`Linking.openURL`跳转至跳转至应用市场、系统浏览器、系统短信页面，使用`window.location.href='tel:'`跳转至系统电话页面。

## 效果预览

<img src="screenshots/Redirect.gif" width="200">

## 实现思路

1. 使用RN自带Deep Links能力进行跳转应用市场、系统浏览器、系统短信页面。

```
// 跳转至应用市场
 Linking.openURL('https://appgallery.huawei.com/app/detail?id=com.huawei.hmsapp.appgallery');
// 跳转至系统浏览器
 Linking.openURL('https://www.example.com');
// 跳转至系统短信
 Linking.openURL('sms://10086')

```

2. 使用HTML的`window.location.href = 'tel:'`跳转至系统电话页面。

```
<WebView
   javaScriptEnabled={true}
   domStorageEnabled={true}
   schemeList={['tel']}
   source={{ html: HTMLContent }}
/>

<script>
   function callPhone(number) {
      // 使用 tel: 协议拨打电话
      window.location.href = 'tel:' + number;
   }
</script>
```

## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。
- 本示例使用0.72.59版本RNOH
- 本示例使用13.10.4-rc.3版本react-native-webview，该版本中已支持在WebView组件内增加参数schemeList，设置schemeList={['XXX']}后正常访问非标准协议的页面。

## 工程目录

```
ReactNativeRedirect                     // 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                                       // 键盘监听实现
├──index.js                                      // 入口文件
└──metro.config.js                               // 打包配置
```
## 参考文档
[Keyboard](https://reactnative.cn/docs/next/linking#openurl)

[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)

[react-native-webview使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-webview(nocodegen).md)