Question

当前，我正在将android设备文件夹中的html文件加载到webview中。

dashboard.html文件包含一些脚本。如果它是静态的，则可以正常工作。

<WebView
  ref={(component) => (this.webview = component)}
  style={{ height: height * 1.3 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
  startInLoadingState={true}
  javaScriptEnabledAndroid={true}
  mixedContentMode={'compatibility'}
/>

但是我需要在脚本中动态更新变量。如何从react-native组件访问放置在Assets文件夹中的脚本。

Answer 1

您可以使用forceUpdate（）; 例如

<webView source={{html: this.state.html}}></webView>

onTestBtnClicked() {
    const html = '<div>test1</div>';
    this.setState({ html });
    this.forceUpdate();
}

Answer 2

您无法访问和更新脚本文件，但也许一旦使用注入的JavaScript属性加载了WebView，就可以运行脚本或其他代码

示例：

const injectedJs = `
    alert("My custom code will go here!");
`;

return (
    <WebView
    ref={(component) => (this.webview = component)}
    style={{ height: height * 1.3 }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
    startInLoadingState={true}
    javaScriptEnabledAndroid={true}
    mixedContentMode={'compatibility'}
    injectedJavaScript={injectedJs}
    javaScriptEnabledAndroid={true}
    />
);

React Native将动态内容加载到Webview

2 个答案: