# ReactNativeWebviewBack

**Repository Path**: scenario-samples/react-native-webview-back

## Basic Information

- **Project Name**: ReactNativeWebviewBack
- **Description**: 在应用开发中，经常需要层层浏览网页。在当前的RN框架开发过程中，根据react-native-webview三方库指导打开一个网址，网页浏览过程中侧滑不会返回上一个页面，而是直接退出应用。BackHandler.addEventListener('hardwareBackPress', callback)是RN提供的用于监听返回键的API，可用于自定义返回行为，当未自定义返回行为时为默认动作退出A
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 浏览网页时如何通过侧滑返回上一层并规避导航栏demo

## 场景介绍

在应用开发中，经常需要层层浏览网页。在当前的RN框架开发过程中，根据[react-native-webview](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-webview.md)三方库指导打开一个网址，网页浏览过程中侧滑不会返回上一个页面，而是直接退出应用。BackHandler.addEventListener('hardwareBackPress', callback)是RN提供的用于监听返回键的API，可用于自定义返回行为，当未自定义返回行为时为默认动作退出App。

本示例使用[@react-native-webview](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-webview.md)实现浏览网页时支持侧滑返回上一页
，[@react-native-safe-area-context](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-safe-area-context.md)实现导航栏规避。
。

## 效果预览

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

## 实现思路

1. 通过BackHandler.addEventListener('hardwareBackPress', callback)函数添加返回按钮监听事件

```
useEffect(() => {
    // 添加返回按键监听
    BackHandler.addEventListener('hardwareBackPress', handleBackButton);

    // 组件卸载时移除监听
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
    };
  }, []);

```

2. 自定义处理返回按键事件

```
// 处理返回按键事件
  const handleBackButton = (): boolean  => {
    if (canGoBack.current) {
      webViewRef.current?.goBack();
      return true; // 表示已经处理了返回事件
    }
    return false; // 没有处理返回事件，允许默认行为
  };
```

3. 加载网页并规避导航栏

```
   <SafeAreaProvider initialMetrics={initialWindowMetrics}>
     <SafeAreaView style={{ flex: 1, backgroundColor: "white" }}>
       <WebView
           ref={webViewRef}
           source={{uri: 'https://reactnative.dev/'}}
           javaScriptEnabled={true}
           domStorageEnabled={true}
           onNavigationStateChange={onNavigationStateChange}
            />
     </SafeAreaView>
   </SafeAreaProvider>
```

## 约束与限制

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

## 工程目录

```
ReactNativeWebviewBack                        // 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-webview](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-webview.md)
[@react-native-safe-area-context](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-safe-area-context.md)