React-native:如何将webview当前网页保存为动态？

Question

我是react原生的新手。我正尝试在我的react原生应用(安卓)中使用WebView。它工作得非常好。我想，加载网页后，在webview中，它会自动保存为本地文件。请帮帮我。

编辑:我想，应用程序将网页保存为本地文件，而不是保存URL。

Answer 1

我猜您正在使用react-native-webview。

有一个叫做onNavigationStateChange的道具。

例如，可以使用以下命令将url保存到AsyncStorage

const storeData = async (url) => {
  try {
    await AsyncStorage.setItem(
      'lastURL',
      url
    );
  } catch (error) {
    // Error saving data
  }
};

...
<WebView
...
onNavigationStateChange={(navState) => {
    const { url } = navState;
    storeData(url)
  }}
/>

如果您只想要=，请编辑html。

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { View, Text } from 'react-native';

export default function App() {
  const injectedJavascript = `(function() {
      window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
    return true;
  };
  window.postMessage(new XMLSerializer().serializeToString(document))
})()`
const saveHTML = (htmlString)=>{
  ...
}
  return (
    <View
      style={{
        flex: 1,
      }}>
      <WebView
        originWhitelist={['*']}
        javaScriptEnabled={true}
        injectedJavaScript={injectedJavascript}
        onMessage={e => {saveHTML(e.nativeEvent.data)}}
        source={{
          uri: 'https://google.com'
        }}
      />
    </View>
  );
}