学习笔记
Java基础相关
JVM内存模型及线程空间
动态代理
java并发编程
Java基础知识
Java中Future
Java中9种常见的CMS GC问题分析与解决
移动端相关
杂乱整理
HarmonyOS 鸿蒙开发知识
ArkTS中如何自定义组件和复用统一样式
Android开发相关
WebView设置圆角
📄 Android 实时屏幕共享技术方案文档
开发工具相关
Git cmd学习整理
Markdown用法大全集
【2023年12月】工作常用
Git如何单独合并某次提交到另一个分支
Debina/Ubuntu安装Node环境
🐳 Docker 命令行与 Docker Compose 全面指南
使用Podman来替代Docker
中文注释提交git后变成"\u0087\u0079..."问题
macOS 容器化工具深度解析:Docker Desktop、OrbStack、Podman 及其他替代方案对比
前端开发相关
Node+TypeScript相关记录
TypeScript 读写 MariaDB
Node TypeScript项目 token生成、管理及拦截校验的实现
TypeScript+Express创建和实现一个服务示例
Express接口处理器抽取注册方式
Express 实现 RESTful API
创建 TypeScript Express 项目,并配置直接用 npm start 运行
TypeScript + Express 实现文件下载接口
export 和 export default的区别
TypeScript+Express 实现用户注册和登录接口
TypeScript 和 JavaScript 中,`===` 和 `==`
CSS中的尺寸大小标准
小程序px和rpx
使用Python快速处理Excel的合并拆分
读书写作相关
一些句子01
李敖语录
罗翔老师的一些经典语句
周易相关知识
周易是对自然描述还是为自然立法
40句落寞诗词,穿透柔魂弱魄
杂玩整理
黑苹果睿频问题
基于纯Linux自己部署Nas构思
Ubuntu换源
Ubuntu挂载tf卡
Ubuntu运行Docker报错
Ubuntu安装运行Docker报错处理
官方镜像安装Docker
Docker 设置root dir 切换数据到其他存储位置
systemctl stop docker 报错
NextCloud安装ffmpeg 显示视频缩略图
Docker源不生效解决方式
Docker源不生效解决方式II——搭建docker-hub镜像
搞定群晖总Docker部署gitea启用ssh协议
MacOS一键安装命令软件列表
群晖ssl证书目录
Android通过ADB命令播放视频
[完成] 群晖自动更新https证书项目
Linux设备整机限速
Linux限速2
Gitea部署Runner服务
精选网站
有声主播知识
学习笔记
有声主播入门到进阶
有声主播新手的入门练手内容推荐
DeepSeek分析喜马拉雅旗下 喜播平台 的有声主播培训
录书设备资料1
典故专辑资料整理
0B. 脚本和大纲
0A. 前置准备资料
Ai大数据模型
模型整理
使用 DeepSeek 通用公式
学会这8招,让DeepSeek变得超好用!
大数据购物分析选优
Windows和Ubuntu部署DeepSeek性能差距
本地部署 Ollam+DeepSeek 探索爬坑
模型对比测试
React Native 和 native 半屏弹窗
React Native Modal + WebView
AI模型使用心得
临时
Linux下对设备进行限速
C++ 学习
01 Android开发学习C++
其他资料分组
【面试相关】💡 面试后、Offer前,可以主动了解和确认的信息
【工作经验】会计师事务所工作中如何有效管理和规避法律风险
-
+
home page
React Native Modal + WebView
明白了,需要在半屏弹窗中使用 WebView 加载一个 HTML 页面。这个需求非常常见。 在这种情况下,我依然**强烈推荐方案一**,即使用 **React Native 的 `Modal` 组件**,并在其中嵌入一个 **`WebView` 组件**。这完美地满足了你的需求,同时避免了原生 `Activity` 带来的生命周期问题。 `react-native-webview` 是目前社区官方推荐的 WebView 解决方案。 ----- ### 最佳方案:React Native Modal + WebView 这个方案的思路是: 1. 整个流程依然在同一个 `Activity` 中,RN 的生命周期不会中断,数据加载可以继续。 2. 弹出一个 RN 的 `Modal` 作为半屏容器。 3. 在 `Modal` 内部,渲染 `WebView` 组件来加载你的 HTML 页面。 **优点:** * **完美解决问题**:后台 RN 页面可以继续执行其任务,不会暂停。 * **开发简单**:纯 JavaScript/TypeScript 实现,无需编写任何原生代码。 * **通信方便**:`react-native-webview` 提供了强大的 `onMessage` 和 `postMessage` 机制,可以让你的 RN 代码和 WebView 中的网页(JavaScript)轻松地双向通信。 * **跨平台**:一套代码,iOS 和 Android 通用。 #### 实现步骤: 1. **安装 `react-native-webview`** ```bash npm install --save react-native-webview # --- 或者 --- yarn add react-native-webview ``` 对于 RN \>= 0.60,链接是自动的。对于 iOS,你还需要进入 `ios` 目录并运行 `pod install`。 2. **代码实现** 下面是一个完整的示例,展示了如何在一个页面加载数据的同时,弹出一个包含 WebView 的半屏窗口。 ```jsx import React, { useState, useEffect, useRef } from 'react'; import { Modal, View, Text, Button, StyleSheet, SafeAreaView } from 'react-native'; import { WebView } from 'react-native-webview'; const MyScreenWithWebViewModal = () => { const [data, setData] = useState(null); const [isModalVisible, setModalVisible] = useState(false); const webViewRef = useRef(null); // 模拟后台数据加载 useEffect(() => { console.log('开始加载数据...'); const timer = setTimeout(() => { console.log('数据加载完成!'); setData('这是从服务器加载的数据'); }, 5000); return () => clearTimeout(timer); }, []); // 从 RN 向 WebView 发送消息 const sendMessageToWebView = () => { const message = JSON.stringify({ command: 'changeColor', color: 'blue' }); webViewRef.current.postMessage(message); }; // 接收从 WebView 发来的消息 const onWebViewMessage = (event) => { console.log('Message received from webview: ', event.nativeEvent.data); // 在这里可以处理来自网页的交互逻辑 // 例如,网页点击了某个按钮通知 RN 关闭弹窗 if (event.nativeEvent.data === 'close-modal') { setModalVisible(false); } }; return ( <SafeAreaView style={styles.container}> <Text>RN 页面</Text> <Text>数据: {data || '加载中...'}</Text> <Button title="打开 WebView 半屏弹窗" onPress={() => setModalVisible(true)} /> <Modal animationType="slide" transparent={true} visible={isModalVisible} onRequestClose={() => setModalVisible(false)}> <View style={styles.modalOverlay}> <View style={styles.modalContent}> {/* 这里是半屏窗口的头部,可以放标题和关闭按钮 */} <View style={styles.header}> <Text style={styles.headerTitle}>WebView 弹窗</Text> <Button title="关闭" onPress={() => setModalVisible(false)} /> </View> {/* WebView 组件 */} <WebView ref={webViewRef} source={{ uri: 'https://reactnative.dev/docs/getting-started' }} // 加载你的 H5 页面地址 style={styles.webView} onMessage={onWebViewMessage} // 如果你的 H5 页面需要执行 JS javaScriptEnabled={true} /> {/* 你也可以在 RN 侧添加与 WebView 交互的按钮 */} <Button title="通知WebView改变颜色" onPress={sendMessageToWebView} /> </View> </View> </Modal> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end', }, modalContent: { height: '60%', // 可以自定义高度 backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden', // 确保子视图不会超出圆角 }, header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 15, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#eee' }, headerTitle: { fontSize: 16, fontWeight: 'bold', }, webView: { flex: 1, }, }); export default MyScreenWithWebViewModal; ``` ### 总结 对于“半屏弹窗 + WebView”这个需求,**使用 `Modal` + `react-native-webview` 是标准且最佳的实践**。它完全避免了你最初遇到的 `Activity` 生命周期问题,并且提供了强大的功能和灵活性。 除非有极端特殊的原因(例如,必须集成一个只提供 `Activity` 形式的、无法修改的第三方原生 SDK),否则都应该采用这种纯 RN 的方案。
嘿手大叔
Oct. 9, 2025, 7:13 p.m.
转发文档
Collection documents
Last
Next
手机扫码
Copy link
手机扫一扫转发分享
Copy link
Markdown文件
share
link
type
password
Update password