React-native-webview почему метод goBack () не работает? - PullRequest
Новая
       154

React-native-webview почему метод goBack () не работает?

0 голосов
/ 12 июля 2020

У меня есть простой проект React Native в Expo, он запускает веб-сайт, используя response-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, и вперед, если они вернулись и хотят go вперед.

А пока я Я пытаюсь заставить работать кнопку "Назад". Я загружаю приложение, а затем перехожу на другую страницу в WebView. При нажатии кнопки «Назад» генерируется следующая ошибка:

TypeError: _reactNativeWebview.WebView.goBack не является функцией (в '_reactNativeWebview.WebView.goBack ()', '_ responseNativeWebview.WebView. goBack 'не определено)

Согласно do c метод goBack () существует:

goBack ()

Я нашел этот , но он реализует компонент на основе классов, поэтому я не мог легко сопоставить предложения с моим функциональным компонентом, и, кроме того, я думаю, что это решение излишне, поскольку они перехватывают навигацию, я считаю то, что я пытаюсь достичь, должно быть проще, но я не могу заставить базовую c навигацию работать в WebView (т.е. go назад и вперед к ранее просмотренным страницам).

Ответы [ 2 ]

2 голосов
/ 12 июля 2020

Все упомянутое вами правильно, Гэри. Единственное, что вам нужно изменить, это способ вызова функции 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 . Наслаждайтесь!

0 голосов
/ 12 июля 2020

также вы можете увидеть различное использование веб-просмотра в этом пакете. https://github.com/ilkerkesici/react-native-beauty-webview

...