RN-WebView 网页里面的图片实现点击方法

我这边是有个需求要浏览的网页实现图片点击放大，实现方法大概如下

添加接收onMessage

<WebView 
    ...
    source={{
        html:changeHtmlTag(content)
    }}
    onMessage={event=>{
        console.log('onMessage Result, ', event.nativeEvent, typeof event.nativeEvent.data)
        if(checkImageUri(event.nativeEvent.data)){
            //具体的点击事件就放这里
            setPressedImageUri(event.nativeEvent.data);
        }
    }}
    ...
/>

修改img标签加入传出方法

 const changeHtmlTag = (text) => {
    let newText = text.replace(/<img /g, '<img onclick="image(this)" ');

    return `
        <script>
            function image(img){
                // alert(img.src);
                // console.log('img after click', img);
                window.ReactNativeWebView.postMessage(img.src)
            }
        </script>
        ${newText}
    `;
  }

检测标签uri

const checkImageUri=(uri)=>{
      return typeof uri==='string' && uri.includes('http');
  }