react-native-webview-invoke

react-native-webview-invoke copied to clipboard

let _refWebview = React.useRef()
let invoke = createInvoke(() => _refWebview.current)

React.useEffect(() => {
    // 暴露方法给 H5
  invoke.define('route', setRoute)
    return () => {}
  }, [])

return (
<WebView
          useWebKit
          ref={_refWebview}
          style={{ flex: 1 }}
          source={{ uri: config.h5 + route.params.uri, headers: { 'Cache-Control': 'no-cache' } }}
          automaticallyAdjustContentInsets={true}
          decelerationRate="normal"
          scrollEnabled={true}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          onMessage={invoke.listener}
          nativeConfig={{ props: { flex: 1 } }}
          onLoad={syntheticEvent => {
            const { nativeEvent } = syntheticEvent
            console.log(`nativeEvent.url: ${nativeEvent.url}`)
          }}
          onLoadProgress={({ nativeEvent }) => {
            console.log(`nativeEvent.progress: ${nativeEvent.progress}`)
          }}
          onLoadStart={syntheticEvent => {
            // update component to be aware of loading status
            const { nativeEvent } = syntheticEvent
            console.log(`onLoadStart nativeEvent.loading: ${nativeEvent.loading}`)
          }}
          onLoadEnd={syntheticEvent => {
            // update component to be aware of loading status
            const { nativeEvent } = syntheticEvent
            console.log(`onLoadEnd nativeEvent.loading: ${nativeEvent.loading}`)
          }}
          onError={syntheticEvent => {
            const { nativeEvent } = syntheticEvent
            console.warn('WebView error: ', nativeEvent)
          }}
          onHttpError={syntheticEvent => {
            const { nativeEvent } = syntheticEvent
            console.warn(
              'onHttpError WebView received error status code: ',
              nativeEvent.statusCode
            )
          }}
          originWhitelist={['*']}
          allowFileAccessFromFileURLs={true}
          allowFileAccess={true}
          allowUniversalAccessFromFileURLs={true}
          allowingReadAccessToURL={'file://'}
        />
)

H5 那边 会报 invoke.fn.route is not function

你的这个问题解决了吗？

invoke.define

暂时没有找到解决办法，目前还是用 class 写，在这里不用 hooks