Android 7を解決する.x React NativeのModal弾窓ロック後に問題が消える

開発者のcさんは急いで鬼に会った.Appのトップページには弾窓があり、携帯電話の画面をロックした後、再びロックを解除すると弾窓がなくなり、テスト員の小米携帯電話に現れた.iPhoneや他のAndroid携帯電話にはこの問題はない.互換性の問題のように見えますが、私はまず彼に焦らないで、まず再現問題のプレゼンテーションを見せて、それから携帯電話の型番、システムのバージョンを見てみましょう.現場が再現された後、確かに問題があったので、今から原因を探してみましょう.
運行環境:小米5、Android 7.1はReact Native提供のModalを使用
一、他のModelに問題があるかどうかを確認してから、他のModelが正常に動作していることを発見し、スクリーンをロックし、ロックを解除した後も正常に表示する.
二、現在の実装ロジックに問題があるかどうかを検査してコードを検査した後、すべて正常であることを発見し、公式ドキュメントによって実現された.Android 7でのレンダリングに問題があるのではないかと疑われますが、他のModalでも正常に表示されます..そこで、両者の違いを比較しました.
三、疑問点を発見した他のModalはカスタマイズされており、gif図が再生されたときにページレンダリングが強制的にトリガーされた疑いがあるgif画像が入っている.そこでgif画像を削除すると、やはりこれらのModalもAndroid 7の携帯電話で異常に動作しています.
四、どうやって解決しますか.gifピクチャ再生のヒントに従って、Appがactive状態に入った場合、setStateによってModalレンダリングを強制的にトリガーするAppアクティブステータスリスニングを追加する解決策を見つけました.
私たちは自分でModalをカプセル化して、自分で監視して、自分で更新させます.コードは次のとおりです.

import * as React from "react";
import { AppState, Modal, Platform, ModalProps } from "react-native";

const isAndroid7 =
  Platform.OS === "android" &&
  (Platform.Version === 24 || Platform.Version === 25);

export default class ModalWrapper extends React.Component {
  state = {
    appState: AppState.currentState
  };

  componentDidMount() {
    if (isAndroid7) {
      AppState.addEventListener("change", this.handleAppStateChange);
    }
  }

  componentWillUnmount() {
    if (isAndroid7) {
      AppState.removeEventListener("change", this.handleAppStateChange);
    }
  }

  handleAppStateChange = (nextAppState: any) => {
    this.setState({ appState: nextAppState });
  };

  render() {
    let { visible } = this.props;
    const { appState } = this.state;
    visible = isAndroid7 ? visible && appState === "active" : visible;
    return (
      
        {this.props.children}
      
    );
  }
}