时间戳

首页 > 解决方案 > WebView .reload() 在 iOS 上无法正常工作

javascript - WebView .reload() 在 iOS 上无法正常工作

问题描述

我正在使用 React Native 的 WebView 组件来显示图表。该图表具有时间刻度选择控件，这些控件作为道具传递给包含 WebView 的组件。当一个新的时间尺度传递给它时，我需要重新加载注入的 JS，以便使用新选择的时间尺度呈现一个新图表。这是组件：

function CandleChart(timeScale) {
  const width = Dimensions.get('window').width;
  const [candleChartJS, setCandleChartJS] = useState(
    chartJS.candleChart(width, timeScale.timeScale)
  );
  const [currTimeScale, setCurrTimeScale] = useState('1h');

  useEffect(() => {
    setCandleChartJS(chartJS.candleChart(width, timeScale.timeScale));
    if (currTimeScale !== timeScale.timeScale) {
      CandleWebViewRef.reload();
      setCurrTimeScale(timeScale.timeScale);
    }
  }, [timeScale]);

  return (
    <View style={{ flex: 1, height: 300, zIndex: -1 }}>
      <WebView
        ref={CandleWVref => (CandleWebViewRef = CandleWVref)}
        originWhitelist={['*']}
        useWebKit={true}
        source={{ html: candleChartHtml }}
        domStorageEnabled={true}
        javaScriptEnabled={true}
        style={styles.WebViewStyle}
        injectedJavaScript={candleChartJS}
      />
    </View>
  );
}

在函数内调用 .reload()useEffect()就像在 Android 上的预期一样工作，但在 iOS 上，WebView 只是在选择不同的时间尺度后继续加载。如何在 iOS 上实现相同的行为？

编辑：感谢 Mayank Garg，我已经解决了我的问题，我将在这里发布稍微修改的最终组件，因为他的答案是针对基于类的组件，我正在使用功能组件和钩子：

function CandleChart(timeScale) {
  const width = Dimensions.get('window').width;
  const [candleChartJS, setCandleChartJS] = useState(
    chartJS.candleChart(width, timeScale.timeScale)
  );
  const [currTimeScale, setCurrTimeScale] = useState('1h');
  const [isReloadWebView, setReloadWebView] = useState(false);

  useEffect(() => {
    setCandleChartJS(chartJS.candleChart(width, timeScale.timeScale));
    if (currTimeScale !== timeScale.timeScale) {
      setReloadWebView(!isReloadWebView);
      setCurrTimeScale(timeScale.timeScale);
    }
  }, [timeScale]);

  return (
    <View style={{ flex: 1, height: 300, zIndex: -1 }}>
      <WebView
        ref={CandleWVref => (CandleWebViewRef = CandleWVref)}
        key={isReloadWebView}
        originWhitelist={['*']}
        useWebKit={true}
        source={{ html: candleChartHtml }}
        domStorageEnabled={true}
        javaScriptEnabled={true}
        style={styles.WebViewStyle}
        injectedJavaScript={candleChartJS}
      />
    </View>
  );
}

标签： javascriptreactjsreact-native

解决方案

您还可以在 webview 的 key params 中使用 add a key this.state={ isRelaodWebview:false }

return (
    <View style={{ flex: 1, height: 300, zIndex: -1 }}>
      <WebView
        ref={CandleWVref => (CandleWebViewRef = CandleWVref)}
        originWhitelist={['*']}
        useWebKit={true}
        source={{ html: candleChartHtml }}
        key={this.state.isRelaodWebview} ------ add this line
        domStorageEnabled={true}
        javaScriptEnabled={true}
        style={styles.WebViewStyle}
        injectedJavaScript={candleChartJS}
      />
    </View>
  );

在使用效果块

useEffect(() => {
    setCandleChartJS(chartJS.candleChart(width, timeScale.timeScale));
    if (currTimeScale !== timeScale.timeScale) {
      //CandleWebViewRef.reload();
      this.setState({isRelaodWebview:!this.state.isRelaodWebview}) ----- addd this line
      setCurrTimeScale(timeScale.timeScale);
    }
  }, [timeScale]);

这会帮助你，它会帮助我

推荐阅读