在 expo 中的 WebView 页面之间导航答案

【问题标题】：Navigate between WebView pages in expo在 expo 中的 WebView 页面之间导航
【发布时间】：2020-05-26 11:04:29
【问题描述】：

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

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 中按下时返回一页）？

【问题讨论】：

标签： javascript react-native mobile webview expo

【解决方案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 }}
      />
    );
  }
}

【讨论】：