在 expo 的 WebView 页面之间导航

Question

我在托管工作流中构建了一个 Expo 应用程序 (Android)，其中一个静态屏幕包含一个 webview。

import React, { Component, useState } from "react";
import { Alert, StyleSheet, Text, TouchableHighlight, View, Modal } from 'react-native';
import { WebView } from 'react-native-webview';




export default class MyWeb extends Component {
  render() {
    return (

      <WebView
        source={{ uri: 'https://example.com/forum/' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}

现在我想配置 Android 后退按钮切换到最近打开的网页，而不是关闭应用程序。正常路由是不可能的，因为它是一个论坛，并且有许多经常变化的页面和子页面。

是否可以像普通网络浏览器中的后退按钮一样配置后退按钮（在 WebView 中按下后退一页）？

Answer 1

您可以使用 BackHandler

覆盖 android 后退按钮

export default class MyWeb extends Component {

  // override the backbutton
  BackHandler.addEventListener('hardwareBackPress', function() {    
    if(this.webref){
      this.webref.goBack();
    }
    return true;
  });


  render() {
    return (
      <WebView
        ref={r => (this.webref = r)} // create a ref to your webview
        source={{ uri: 'https://example.com/forum/' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}

在 expo 的 WebView 页面之间导航

Navigate between WebView pages in expo

javascript

mobile

webview

react-native

expo