React Native WebView预渲染以提高性能-如何实现？

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

为了提高应用程序的性能，我尝试预取外部HTML，以便在呈现组件时准备就绪。似乎只有对render方法的实际调用才会导致加载开始，这仅由屏幕上呈现的内容控制。我想React Native没有阴影DOM的概念，可以用来将render方法称为head of time。 试图操纵生命周期方法也不起作用，可能也不是一种正确的方法

我还尝试在标题中使用正确的用户代理对外部HTML内容执行

fetch（）

，并将responseText传递给WebComponent。这有时适用于某些源站点，但对于其他站点，我遇到了ACAP（自动内容访问协议）问题，因此这不是首选解决方案

---

有没有一种方法可以将外部HTML内容预取到WebView组件中，以便它显示得更快？

fetch

方法在react端运行，

fetch

保留缓存，但该缓存可用于react API和该组件

WebView

有自己的缓存概念。这是一个浏览器。

fetch

的缓存将不适用于

WebView

。为了通过预加载的数据更快地加载，您应该通过

WebView

实例

fetch

api获取数据

您可以通过设置宽度和高度

0

来创建隐藏的

WebView

，并在上面加载您的站点。这将在

ViewView

上加载您的站点，并保留缓存，以便下次加载时使用

这是一个样本

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
看法
网络视图，
警觉的，
活动指示器，
}从“反应本机”；
//常量url=https://github.com/facebook/react-native'
//常量url=https://in.yahoo.com/?p=us'
常量url=https://www.facebook.com/'
类TestWebView扩展组件{
render（）{
var renderTime=Date.now（）；
返回(
{
Alert.Alert（'On load event'，'load time:${Date.now（）-renderTime}`）
}}
/>
);
}
}
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
isLoaded:false，
}
}
render（）{
if（this.state.isLoaded）{
返回(
)
}
返回(
{
this.setState（{isLoaded:true}）
}}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
});

---

我测试这个。第一次在

WebView

上加载数据后，在实际的

WebView

上，我们要向用户显示的位置的加载减少了70%。

我也在寻找与此查询相关的任何解决方案。动态设置高度的想法也解决了我的问题。谢谢

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',
  },
});