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

Question

我正在使用 React Native 的 WebView 组件来显示图表。该图表具有时间刻度选择控件，这些控件作为 props 传递给包含 WebView 的组件。当新的时间尺度传递给它时，我需要重新加载注入(inject)的 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>
  );
}

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

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

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

Answer 1

您还可以在 webview 的 key params 中添加 key这个.状态={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 block 中

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]);

这对你有帮助，对我也有帮助