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 的方案。