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不是函数（在 '_reactNativeWebview.WebView.goBack（）'，'_ reactNativeWebview.WebView.goBack' 未定义）

根据文档的goBack（）方法存在：

goBack()

我found this，但它正在实现基于类的组件，因此我无法轻松地将建议映射到我的功能组件中，此外，我认为该解决方案过于苛刻，因为它们正在拦截导航，我相信我正在尝试实现应该更简单的方法，但是我无法在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（）方法不起作用？

2 个答案: