android - 如何在 Android App 进入后台之前更改 View ？

Question

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



下图显示了我当前将 App 置于后台状态时得到的结果:



以下是当 App 放在后台时我想要做的事情(在 iOS 上工作，在 Android 上不太好):



这就是实现。

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

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，当按下方形按钮时，它会截取当前 View 并将其用作应用程序的背景图像。但是，有时图层(高度)的变化会比 Android 屏幕截图更快，因此我可以在背景中看到绿屏，因为 Android 将其用作图像。

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

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

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



更新 1

我现在意识到这个问题可能设置得不好。

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

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

Answer 1

你可以这样尝试:

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

        this.setState({showSecurityScreen});
    };