Question

在React Native中，当使用WebView组件时，它会在呈现组件时开始加载外部内容。

为了提高应用程序的性能，我尝试预先获取外部HTML，以便在呈现组件时准备就绪。看起来它只是对render方法的实际调用将导致加载开始，这只是由屏幕上呈现的内容控制。我想React Native没有shadow DOM的概念，可以用来调用render方法的时间。试图操纵生命周期方法也行不通，可能也不是一种正确的方法吗？

我还试图在标题中使用正确的用户代理执行外部HTML内容的fetch()，并将responseText传递给WebComponent。这有时适用于某些源站点，但对于其他站点我遇到ACAP（自动内容访问协议）问题，这不是首选解决方案。

有没有办法预先将外部HTML内容提取到WebView组件，以便更快地显示？

Answer 1

fetch方法在反应端运行，fetch保留缓存但可用于反应api和那里的组件。 WebView有自己的缓存概念。这是一个浏览器。 fetch的缓存不适用于WebView。为了加快预加载数据的加载速度，您应该按WebView api的fetch实例获取数据。

您可以通过设置宽度和高度WebView来创建隐藏的0，并在其上加载您的网站。这会将您的网站加载到ViewView并保留缓存，以便下次加载。

这是一个示例

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  WebView,
  Alert,
  ActivityIndicator,
} from 'react-native';

// const url = 'https://github.com/facebook/react-native'
// const url = 'https://in.yahoo.com/?p=us'
const url = 'https://www.facebook.com/'

class TestWebView extends Component {
  render() {
    var renderTime = Date.now();

    return (
      <WebView
        source={{uri: url}}
        style={{marginTop: 20, flex: 1}}
        onLoad={() => {
          Alert.alert('On load event', `Loading time : ${Date.now() - renderTime}`)
        }}
      />
    );
  }
}

export default class App extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      isLoaded: false,
    }
  }

  render() {

    if (this.state.isLoaded) {
      return (
        <TestWebView />
      )
    }

    return (
      <View style={styles.container}>
        <View style={{height: 0, width: 0}}>
          <WebView
            source={{uri: url}}
            onLoad={() => {
              this.setState({isLoaded: true})
            }}
          />
        </View>
        <ActivityIndicator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

我测试了这个。首次加载WebView上的数据后，它会减少我们要向用户显示的实际WebView的70％负载。

React Native WebView预渲染以获得更快的性能 - 如何做到这一点？

1 个答案:

这是一个示例