React Native 和 native 半屏弹窗

你好！你遇到的这个问题非常典型，是理解 Android Activity 生命周期与 React Native (RN) 运行机制交叉影响的关键。

### 问题根源

当你从一个正在运行的 RN 页面（它本身托管在一个 `Activity` 中，我们称之为 `RNActivity`）启动另一个半透明的 `Activity`（我们称之为 `HalfScreenActivity`）时，Android 系统的行为如下：

1.  `HalfScreenActivity` 被推到前台，变为用户可交互的窗口。
2.  尽管 `RNActivity` 在视觉上仍然可见（因为 `HalfScreenActivity` 是半透明的），但它已经失去了焦点。根据 Android 的 Activity 生命周期，`RNActivity` 会进入 `onPause` 状态。
3.  **关键点：** React Native 的 JavaScript 线程的执行与宿主 `Activity` 的生命周期紧密相关。当 `RNActivity` 进入 `onPause` 状态时，RN 框架可能会暂停或显著降低 JavaScript 线程的活动，包括计时器（`setTimeout`）、网络请求（`fetch`）的回调处理以及其他异步任务。

这就是为什么你发现后面的 RN 页面“停止加载数据”了——因为它的执行环境被暂停了。

-----

### 如何处理？

根据你的具体需求，有几种推荐的处理方案，从最佳实践到特定场景的解决方案排序如下：

#### 方案一：使用 React Native 的 Modal (最优选)

这是最符合 RN 生态和跨平台开发思想的方案。不要使用原生的 `Activity` 来实现弹窗，而是使用 RN 提供的组件。

**实现方式：**
使用 React Native 内置的 [`Modal`](https://www.google.com/search?q=%5Bhttps://reactnative.dev/docs/modal%5D\(https://reactnative.dev/docs/modal\)) 组件，或者功能更丰富的社区库，如 `react-native-modal`。

**为什么这是最好的方案？**

* **单一 Activity，无生命周期中断：** Modal 是在同一个 `Activity` 的视图层级上渲染的，它不会导致 `RNActivity` 进入 `onPause` 状态。因此，RN 的 JavaScript 环境会持续正常运行，数据加载不会中断。
  * **状态管理简单：** Modal 的显示和隐藏可以直接通过 RN 的 state (`useState`) 来控制，与你的业务逻辑无缝集成。
  * **跨平台：** 一套代码，在 iOS 和 Android 上表现一致。

**示例代码：**

```jsx
import React, { useState, useEffect } from 'react';
import { Modal, View, Text, Button, StyleSheet } from 'react-native';

const MyScreen = () => {
  const [data, setData] = useState(null);
  const [isModalVisible, setModalVisible] = useState(false);

useEffect(() => {
    // 模拟数据加载
    console.log('开始加载数据...');
    const timer = setTimeout(() => {
      console.log('数据加载完成！');
      setData('这是从服务器加载的数据');
    }, 5000); // 5秒后完成

return () => clearTimeout(timer);
  }, []);

return (
    <View style={styles.container}>
      <Text>RN 页面</Text>
      <Text>数据: {data || '加载中...'}</Text>
      <Button title="打开半屏弹窗" onPress={() => setModalVisible(true)} />

<Modal
        animationType="slide"
        transparent={true} // 关键！使其透明
        visible={isModalVisible}
        onRequestClose={() => {
          setModalVisible(!isModalVisible);
        }}>
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text>这是一个半屏窗口</Text>
            <Button title="关闭" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
};

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: '50%', // 半屏高度
    backgroundColor: 'white',
    padding: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
});

export default MyScreen;
```

#### 方案二：使用原生 Fragment 或自定义 View (混合开发推荐)

如果你的半屏窗口必须用原生代码实现（例如，它是一个复杂的原生地图、视频播放器等），那么使用 `Fragment` 或一个自定义的 `View` 会比启动一个新的 `Activity` 更好。

**实现方式：**

1.  创建一个原生的 `Fragment` 或 `View`。
2.  编写一个 Native Module 或 ViewManager，提供 JS 调用的接口来展示和隐藏这个原生组件。
3.  在 RN 中，调用该接口将原生组件覆盖在当前的 `RNActivity` 之上。

**优点：**

* 同样不会导致 `RNActivity` 进入 `onPause`，数据加载可以继续。
  * 可以充分利用原生能力。

**缺点：**

* 实现比方案一复杂，需要编写原生桥接代码。

#### 方案三：处理 Activity 生命周期 (如果必须使用 Activity)

如果你因为某些原因（比如集成第三方只提供 Activity 的 SDK）**必须**启动一个新的 `Activity`，那么你需要接受 `RNActivity` 会被暂停的事实，并在其恢复时做相应处理。

**实现方式：**
当 `HalfScreenActivity` 关闭后，`RNActivity` 会依次调用 `onStart` 和 `onResume` 方法。你需要利用这个时机来重新触发或检查你的数据加载逻辑。

在你的 React Native 组件中，你可以监听应用状态的变化。

**示例代码 (JS 端):**

```jsx
import React, { useEffect, useState, AppState } from 'react';
import { View, Text } from 'react-native';
import { NativeModules } from 'react-native'; // 假设你有一个原生模块来启动Activity

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [appState, setAppState] = useState(AppState.currentState);

// 数据加载函数
  const loadData = () => {
    // 避免重复加载
    if (data === null || data === '加载失败') {
      console.log('开始或重新加载数据...');
      setData('加载中...');
      // 模拟网络请求
      setTimeout(() => {
        console.log('数据加载完成！');
        setData('这是重新加载的数据');
      }, 2000);
    }
  };

useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      // 当应用从后台返回前台时，nextAppState 会变为 'active'
      // 这也对应了 Activity 的 onResume
      if (appState.match(/inactive|background/) && nextAppState === 'active') {
        console.log('App has come to the foreground! Resuming tasks.');
        loadData(); // 重新加载数据
      }
      setAppState(nextAppState);
    });
    
    // 首次加载
    loadData();

return () => {
      subscription.remove();
    };
  }, [appState]); // 依赖 appState 来响应变化

return (
    <View>
      <Text>数据: {data}</Text>
      {/* 按钮去调用原生方法打开半屏Activity */}
      <Button title="打开原生Activity" onPress={() => NativeModules.MyModuleManager.openHalfScreenActivity()} />
    </View>
  );
};
```

这种方法的逻辑是：当你的半屏 `Activity` 关闭时，`RNActivity` 会 `resume`，这会触发 `AppState` 的 `active` 事件，从而让你有机会重新执行加载逻辑。

### 总结与对比

| 方案 | 实现方式 | 优点 | 缺点 | 推荐指数 |
| :--- | :--- | :--- | :--- | :--- |
| **方案一** | **React Native Modal** | **简单、纯JS、跨平台、无生命周期问题** | 对于极度复杂的原生UI可能有限制 | ⭐⭐⭐⭐⭐ (首选) |
| **方案二** | 原生 Fragment / View | 性能好，可实现复杂原生UI，无生命周期问题 | 需要编写原生桥接代码，实现复杂 | ⭐⭐⭐⭐ |
| **方案三** | 处理 Activity 生命周期 | 可以集成必须使用 `Activity` 的第三方SDK | **数据加载会中断和重启**，逻辑复杂，体验可能不佳 | ⭐⭐ (仅在别无选择时使用) |

**强烈建议你首先尝试方案一**，使用 React Native 的 `Modal` 组件，这是最直接、最符合框架设计思想的解决方案。