如何在 Android App 进入后台之前更改视图？

Question

我有一个有两个视图的应用程序，只有在应用程序处于活动状态（前景）时才必须显示蓝色视图，而当应用程序置于后台时必须显示绿色视图（例如，在 Android 上的硬件方形按钮上计时）。

下图是我将App置于后台状态时当前得到的结果：

以下是我想在应用程序放在后台时做的事情（在 iOS 上可以，在 Android 上不太好）：

这就是实现。

请暂时忽略 iOS 的组件除了 View 的样式之外几乎与 Android 的组件相同。我正在使用不同的组件进行其他测试，目前我可以保持它们这样。这两个组件（iOS / Android）之间的区别在于样式，因为在 iOS 中 zIndex 有效，而在 Android 中我必须使用 elevation 来重叠视图。

const showSecurityScreenFromAppState = appState =>
    ['background', 'inactive'].includes(appState);

const withSecurityScreenIOS = Wrapped => {
    return class WithSecurityScreen extends React.Component {
        constructor(props) {
            super(props);
        }

        state = {
            showSecurityScreen: showSecurityScreenFromAppState(AppState.currentState),
        };

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

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

        onChangeAppState = nextAppState => {
            const showSecurityScreen = showSecurityScreenFromAppState(nextAppState);

            this.setState({showSecurityScreen});
        };

        //this.state.showSecurityScreen
        render() {
            return (
                <>
                    <View style={[styles.container, {zIndex: this.state.showSecurityScreen ? 1 : -1}]}>
                        <View style={{flex: 1, backgroundColor: globalStyles.colors.customerGreen}}>
                            <View style={styles.upperView}>
                                <Text style={styles.upperViewText}>MyApp</Text>
                            </View>
                        </View>
                    </View>
                    <Wrapped {...this.props}/>
                </>
            );
        }
    };
};

const withSecurityScreenAndroid = Wrapped => {
    return class WithSecurityScreen extends React.Component {
        constructor(props) {
            super(props);
        }

        state = {
            showSecurityScreen: showSecurityScreenFromAppState(AppState.currentState),
        };

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

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

        onChangeAppState = nextAppState => {
            const showSecurityScreen = showSecurityScreenFromAppState(nextAppState);

            this.setState({showSecurityScreen});
        };

        //this.state.showSecurityScreen
        render() {
            return (
                <>
                    <View style={[styles.container, {elevation: this.state.showSecurityScreen ? 1 : -1}]}>
                        <View style={{flex: 1, backgroundColor: globalStyles.colors.customerGreen}}>
                            <View style={styles.upperView}>
                                <Text style={styles.upperViewText}>MyApp</Text>
                            </View>
                        </View>
                    </View>
                    <Wrapped {...this.props}/>
                </>
            );
        }
    };
};

export const withSecurityScreen =
    Platform.OS === 'ios' ? withSecurityScreenIOS : withSecurityScreenAndroid;

代码中没有问题，它在 iOS 上运行良好，但在 Android 上有时可以，有时不能。我怀疑原因是Android OS，当按下方形按钮时，它会截取当前视图并将其用作应用程序的背景图像。但是，有时图层（高度）的变化会比 Android 屏幕截图更快，因此我可以在背景中看到绿屏，因为 Android 正在使用它作为图像。

有没有办法同步这些操作？即：我能否确保当我按下方形按钮时，Android 会等待视图更改，然后让它在后台运行？

注意：我已经测试了应用程序在前台时的海拔功能，当它在后台或前台时，只需反转 elevation 的值，我保证 elevation 工作正常。

注意：在下面的动画中，当后台任务中的View为白色时，为失败。当视图在背景中变为绿色时，表示成功。为什么是随机的？

---

更新 1

我现在意识到问题可能设置不当。

首先我使用了不正确的术语来指代应用程序的后台状态，我在 Android 中所说的视图称为最近应用程序（或任务视图）。然后，其次，在最近的应用程序（任务视图）中，Android 做了什么，在按下方形或圆形按钮后，当前视图的屏幕截图，然后显示任务视图，用作我的应用程序的图像，他刚刚做的屏幕截图.这个问题很烦人，因为（如上面的 GIF 所示）有时屏幕截图是在视图更改后完成的。有时（并且经常）屏幕截图出现在视图更改（绿色）之前。

这就是为什么有时在任务视图中我会看到蓝屏，有时会看到绿屏。可以说，这几乎是一个竞争问题。我的方法可能不合适，我应该另找一种方法。是否可以为我的应用手动更改任务视图中使用的图像？

Answer 1

你可以这样试试：

    onChangeAppState = async nextAppState => {
        const showSecurityScreen = await showSecurityScreenFromAppState(nextAppState);

        this.setState({showSecurityScreen});
    };