ReactNative WebView混合开发

随着移动应用复杂度的提升，纯原生开发面临迭代周期长、跨平台成本高等挑战。WebView混合开发通过将Web技术嵌入原生应用框架，实现了动态内容更新与原生性能的平衡。React Native WebView 混合开发模式正是在这种背景下应运而生，它巧妙地融合了 Web 技术的灵活高效与原生应用的强大能力，成为众多开发者解决复杂业务场景的首选方案

何为混合开发

混合开发（Hybrid App Development）指在原生应用容器中嵌入 Web 技术（HTML/CSS/JavaScript）的架构模式。React Native WebView 作为桥梁，将 Web 内容无缝集成到原生界面中

核心优势

• 动态化能力：无需发版即可更新业务逻辑与界面
• 跨平台复用：一套 Web 代码兼容 iOS 与 Android
• 开发效率提升：Web 团队快速迭代 + 原生团队深度优化
• 生态融合：复用 Web 生态工具（Vue/React 等框架）

应用场景

• 高频更新的内容页面（新闻/商品详情）
• 运营活动页（节日专题/促销活动）
• 第三方服务集成（支付/地图/客服）
• 逐步迁移策略（旧 Web 应用向 App 过渡）

安装及使用

直接使用官方提供的 react-native-webview 第三方工具包，安装：

➜ npm install react-native-webview

WebView组件

此包会导出WebView组件，直接像开发web页面一样使用组件即可

import { WebView } from 'react-native-webview'

export function ViewPage() {
  return <WebView />
}

假设你想展示的web页面地址为http://your-site.com，可通过source属性配置：

<WebView
  source={{ uri: 'http://your-site.com' }}
/>

也支持加载本地文件系统HTML文件，或者行内HTML字符串：

<WebView
  source={{ html: '<button>点击</button>' }}
/>

原生向web通信

混合应用中webview与原生的交互是必不可少的一环，原生与web基于消息形式传递信息，WebView组件实例上有很多属性和方法可以使用，其中postMessage方法是用来向目标web环境传递消息

import { WebView, WebViewMessageEvent } from "react-native-webview";

export default function WebViewPage() {
  const webViewRef = useRef<WebView>(null);

  const onPress = () => {
    webViewRef.current?.postMessage("hello");
  };

  const onMessage = (e: WebViewMessageEvent) => {
    console.log(e.nativeEvent.data);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ padding: 24 }}>
        <Button onPressIn={onPress}>发送</Button>
      </View>

      <WebView
        ref={webViewRef}
        source={{ uri: "http://10.16.251.184:5500/webview.html" }}
        onMessage={onMessage}
      />
    </SafeAreaView>
  );
}

HTML中可通过message事件监听到原生的消息事件

额外要注意的是在IOS下原生给web传递信息时，WebView组件上也必须绑定onMessage事件，否则将不会生效

web向原生通信

web像原生也是通过postMessage传递消息的，在WebView中JS上下文会自动注入ReactNativeWebView上下文

<button id="btn">发送</button>

<script>
  new VConsole();

  console.log(navigator.userAgent);

  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    window.ReactNativeWebView.postMessage(JSON.stringify({
      from: 'webview',
      type: 'test',
      data: 'hello world'
    }));
  });

  window.addEventListener('message', (e) => {
    console.log('message', e);
  })
</script>

一个良好的团队通常都会基于一套规则封装自己的事件机制，基于发布订阅的事件机制，做到通信的可拓展、健壮性

脚本注入

原生可以直接在webview中注入特定的代码片段，这样就可以控制web页面

// 原生
const jsRuntime = `
  const btn = document.getElementById("btn");
  btn.innerHTML = "Clicked!";
`;

<WebView
  ref={webViewRef}
  source={{ uri: "http://172.16.251.184:5500/webview.html" }}
  injectedJavaScript={jsRuntime}
/>

// web
<button id="btn">发送</button>

不出意外的话web中的button按钮文案将自动变为Clicked!

来看下以上的效果：

调试

相信经常开发H5混合应用的小伙伴经常需要通过不断的调试，才能知道在webview中哪里出错了等等

对于webview中看一些log日志、dom节点及样式通常都要借助devtool来完成，进行webview调试首先要开启此选项：

<WebView
  source={{ uri: "http://172.16.251.184:5500/webview.html" }}
  webviewDebuggingEnabled={true} 
/>

如果是一些网络数据请求方面都是关于抓包工具的，这里就不再赘述

ios调试

IOS调试通常需要借助Safari来完成，当本机打开webview后，打开Safari会看到显示的网页链接地址

Android

android环境可以通过Chrome Inspect进行调试

属性及方法

除了以上介绍的几个基本的事件、方法、属性外此组件还提供了很多有用的属性

感兴趣的可以翻阅参考文档

架构原理

感谢支持

再次感谢您的支持，您的支持将鼓励我继续创作。文章通常首发公众号，可以关注我的公众号，获取最新优质文章；同时如果你有 珠宝首饰之类 的需求，也可以微信扫码光临小店，种类多多欢迎来选👏🏻

 

若您在阅读过程中发现一些错误：如语句不通、文字、逻辑等错误，可以在评论区指出，我会及时调整修改，感谢您的阅读。同时您觉得这篇文章对您有帮助的话，可以打赏作者一笔作为鼓励，金额不限，感谢支持🤝。