React Native安卓端相机关闭后AppState不更新，模态框无法显示求助

问题描述 #

• 基于react-native-modal实现的模态框，内部包含调用react-native-image-picker启动相机的按钮
• 安卓端拍照完成后，模态框本该自动重新显示，但实际仅显示主屏幕，需将应用最小化再切回前台才会出现
• 排查发现：模态框内的appState在相机关闭后仍保持background状态，而主屏幕的appState为active
• 已尝试方案：重新设置主屏幕模态框的visibility状态、修改AndroidManifest.xml中MainActivity的launchMode为singleTop，均未解决问题

解决方案 #

1. 强制同步AppState+触发模态框重渲染 #

在拍照完成的回调里，除了更新visibility状态，手动触发AppState同步，并通过key属性强制模态框重渲染：

import { AppState } from 'react-native';

// 拍照成功后的处理函数
const handleImagePick = (response) => {
  // 先设置模态框可见状态
  this.setState({ visibility: true }, () => {
    // 手动推送AppState变为active的事件
    AppState.dispatch({ type: 'change', appState: 'active' });
    // 生成随时间变化的key，强制模态框重渲染
    this.setState({ modalKey: Date.now() });
  });
};

主屏幕中给MyModal添加key属性：

render() {
  return (
    {this.state.visibility && (
      <MyModal 
        key={this.state.modalKey}
        visibility={this.state.visibility} 
      />
    )}
  );
}

2. 主屏幕监听AppState变化，主动恢复模态框显示 #

在主组件中监听AppState变化，当应用切回active状态时，强制重新显示模态框：

componentDidMount() {
  AppState.addEventListener('change', this.onAppStateChange);
}

componentWillUnmount() {
  AppState.removeEventListener('change', this.onAppStateChange);
}

onAppStateChange = (nextState) => {
  // 如果模态框本来就该显示，切回active时强制恢复可见
  if (nextState === 'active' && this.state.shouldShowModal) {
    this.setState({ visibility: true });
  }
};

注：shouldShowModal是额外状态变量，点击相机按钮时设为true，用来记录模态框的预期显示状态。

3. 让MyModal组件结合AppState控制显示 #

修改MyModal组件逻辑，不再仅依赖props.visibility，而是结合当前AppState判断是否显示：

import { AppState } from 'react-native';

class MyModal extends Component {
  state = {
    appState: AppState.currentState,
  };

  componentDidMount() {
    AppState.addEventListener('change', this.updateAppState);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.updateAppState);
  }

  updateAppState = (newState) => {
    this.setState({ appState: newState });
  };

  render() {
    const { visibility } = this.props;
    const { appState } = this.state;
    // 只有当预期可见且AppState为active时，才显示模态框
    const showModal = visibility && appState === 'active';

    return (
      <Modal
        isVisible={showModal}
        avoidKeyboard
      >
        {/* 模态框内容 */}
      </Modal>
    );
  }
}

4. 调整AndroidManifest配置 #

将launchMode改回singleTask，添加android:taskAffinity=""避免相机启动时创建新任务栈：

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:launchMode="singleTask"
    android:taskAffinity=""
    android:windowSoftInputMode="adjustPan">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

问题原因 #

安卓启动相机时，会将当前App的Activity推入后台；相机关闭后，主Activity回到前台，但模态框所在组件未正确接收AppState更新事件，内部状态仍停留在background，导致模态框不显示。上述方案通过强制同步状态、组件自主判断状态或调整系统任务栈配置，解决了状态不同步的问题。

内容的提问来源于stack exchange，提问作者Boris