react-native-webview 为什么 goBack() 方法不起作用？

Question

我在 Expo 中有一个简单的 React Native 项目，它使用 react-native-webview.

启动了一个网站

这里是源代码：

import React from "react";
import { StyleSheet, View, SafeAreaView } from "react-native";
import { AntDesign } from "@expo/vector-icons";

import { WebView } from "react-native-webview";


export default function App() {
  const goback = () => {
    WebView.goBack();
  };

  return (
    <SafeAreaView>
      <WebView source={{ uri: "https://google.co.uk" }} />
      <View style={styles.navbar}>
        <View style={styles.forward}>
          <AntDesign name="right" size={25} color="grey" />
        </View>
        <View style={styles.back}>
          <AntDesign name="left" size={25} color="grey" onPress={goback} />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  navbar: {
    height: 40,
    width: "100%",
    flexDirection: "row-reverse",
    paddingTop: 6,
    backgroundColor: "#fefefe",
    borderTopColor: "grey",
    borderTopWidth: 1,
  },
  back: {
    width: 50,
    height: 50,
    marginRight: 10,
  },
  forward: {
    width: 50,
    height: 50,
  },
});

WebView 组件可以很好地加载网站 (google.co.uk)，但我无法使导航正常工作。我只是想创建一个后退按钮，允许用户导航回到他们在 WebView 中查看过的其他页面，如果他们已经返回并想继续前进，则可以前进。

现在我正在尝试让后退按钮正常工作。我加载应用程序，然后导航到 WebView 上的另一个页面。按下后退按钮时，会生成以下错误：

TypeError: _reactNativeWebview.WebView.goBack is not a function (In '_reactNativeWebview.WebView.goBack()','_reactNativeWebview.WebView.goBack' is undefined)

根据文档，存在 goBack() 方法：

goBack()

我 found this 但它正在实现一个基于 class 的组件，因此我无法轻松地将建议映射到我的功能组件中，而且，我认为该解决方案是过度的，因为它们正在拦截导航，我相信我想要实现的目标应该更简单，但我无法让基本导航在 WebView 上工作（即返回和前进到以前查看的页面）。

Answer 1

你提到的一切都是正确的加里。您唯一需要更改的是调用 goBack 函数的方式。 goBack 不是组件的直接函数，您需要传递对 WebView 组件的引用才能获得此函数。在您的情况下，您可以如下更改组件以使其正常工作：-

import React, { useRef } from "react";
import { StyleSheet, View, SafeAreaView } from "react-native";
import { AntDesign } from "@expo/vector-icons";

import { WebView } from "react-native-webview";


export default function App() {
  const webViewRef = useRef(null)
  
  const goback = () => {
    webViewRef.current.goBack();
  };

  return (
    <SafeAreaView>
      <WebView ref={webViewRef} source={{ uri: "https://google.co.uk" }} />
      <View style={styles.navbar}>
        <View style={styles.forward}>
          <AntDesign name="right" size={25} color="grey" />
        </View>
        <View style={styles.back}>
          <AntDesign name="left" size={25} color="grey" onPress={goback} />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  navbar: {
    height: 40,
    width: "100%",
    flexDirection: "row-reverse",
    paddingTop: 6,
    backgroundColor: "#fefefe",
    borderTopColor: "grey",
    borderTopWidth: 1,
  },
  back: {
    width: 50,
    height: 50,
    marginRight: 10,
  },
  forward: {
    width: 50,
    height: 50,
  },
});

此参考将帮助您调用 webview module 文档中提到的任何参考函数。享受吧！

Answer 2

您还可以在这个包中看到 webview 的不同用法。 https://github.com/ilkerkesici/react-native-beauty-webview

react-native-webview 为什么 goBack() 方法不起作用？

react-native-webview why is the goBack() method not working?

react-native

react-native-android

react-native-ios

expo

react-native-webview