react-native <WebView>内部网页跳转并返回上一级

最新推荐文章于 2023-08-15 20:24:57 发布

啸饮流云

最新推荐文章于 2023-08-15 20:24:57 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签： webview react-native

本文链接：https://blog.youkuaiyun.com/xiaoyinliuyun/article/details/76620528

android 专栏收录该内容

14 篇文章

订阅专栏

本文介绍在使用Rn的WebView控件时，如何通过监听原生返回键和自定义按钮来实现网页内部跳转的返回功能。具体包括添加返回键监听、定义回调方法以及更新WebView导航状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Rn的WebView控件时，遇到的网页内部跳转如何返回的问题。

点原生Back键返回；
点左上角返回键返回；

上代码

import React, {Component} from 'react';
import {StyleSheet, Platform, View, WebView, BackAndroid} from 'react-native';
import * as CommonUI from 'rncommonui';
import Separator from '../../common/SeperatorLine';

var WEB_URL = 'http://www.baidu.com';
var WEB_VIEW_REF = 'webview';

export default class AboutDeveloperPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            webUrl: WEB_URL,
            scalesPageToFit: false,
        };
        // 添加返回键监听
        this.addBackAndroidListener(this.props.navigator);
    }

    render() {
        return (
            <View style={{backgroundColor: '#000000', flex: 1}}>
                <CommonUI.NaviBar title="关于开发者" onLeft={this.state.backButtonEnabled?this.goBack:null}/>
                <Separator />
                <WebView
                    ref={WEB_VIEW_REF}
                    style={styles.webView}
                    source={{uri: this.state.webUrl}}
                    scalesPageToFit={this.state.scalingEnabled}
                    onNavigationStateChange={this.onNavigationStateChange}/>
            </View>
        );
    }

    goBack = () => {
        this.refs[WEB_VIEW_REF].goBack();
    };

    // 监听返回键事件
    addBackAndroidListener(navigator) {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }

    onBackAndroid = ()=> {
        if (this.state.backButtonEnabled) {
            this.refs[WEB_VIEW_REF].goBack();
            return true;
        } else {
            return false;
        }
    };

    onNavigationStateChange = (navState)=> {
        this.setState({
            backButtonEnabled: navState.canGoBack,
        });
    };
}

点原生Back键返回：

1.首先要添加backandroid监听

// 监听返回键事件
    addBackAndroidListener(navigator) {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }

用以实现自定义onBackAndroid回调方法。

onBackAndroid = ()=> {
        if (this.state.backButtonEnabled) {
            this.refs[WEB_VIEW_REF].goBack();
            return true;
        } else {
            return false;
        }
    };

返回true代表不调用默认返回功能，返回false代表退出当前界面。

this.refs[WEB_VIEW_REF].goBack();//回退<WebView>控件内部跳转的页面。

返回WebView界面还是退出当前页取决于

this.state.backButtonEnabled//代表是否能回退

WebView内部跳转后状态改变时回调：

onNavigationStateChange = (navState)=> {
        this.setState({
            backButtonEnabled: navState.canGoBack,
        });
    };

改变this.state.backButtonEnabled状态。

点左上角返回键返回

<CommonUI.NaviBar title="关于开发者" onLeft={this.state.backButtonEnabled?this.goBack:null}/>

关键是onLeftfang方法定义，null代表点击直接返回当前页。
this.goBack方法用于WebView内部页面返回。

goBack = () => {
        this.refs[WEB_VIEW_REF].goBack();
    };