React-Native Statusbar 不响应样式更改

Question

我有一个登录/注册屏幕，背景中有一个视频，供新用户启动应用程序，在此屏幕中我弹出登录或注册选项的模式。当这些模式启动时，我想将状态栏从透明和浅色文本更改为白色背景和深色文本。

为此，如果模式显示或不显示，我会用一个状态绑定它们，但它只会更新，就像 10 个模式弹出中的 1 个一样，我不知道为什么。

这是我的登录屏幕代码：

const LoginScreenMobile = ({ onLogin }) => {
    const [loginModalVisible, setLoginModalVisible] = useState(false)

    return (
        <>
            <StatusBar
                style={loginModalVisible ? 'dark' : 'light'}
            />
            <View style={styles.videoContainer}>
                <LoginModal
                    setVisible={setLoginModalVisible}
                    isVisible={loginModalVisible}
                    modalStyle={styles.modalContainer}
                />
                <Video
                    style={styles.video}
                    source={require('../../assets/videos/login-cooking.mp4')}
                    shouldPlay
                    isLooping
                    isMuted
                    resizeMode="cover"
                />
                <View style={{ flex: 1 }} />
                <View style={styles.textContainer}>
                    <Text style={styles.text}>Food</Text>
                    <Text style={styles.text}>for</Text>
                    <Text style={styles.text}>Family</Text>
                </View>
                <View style={styles.buttonContainer}>
                    <RegisterButton
                        buttonStyle={styles.registerButton}
                        textStyle={styles.registerText}
                    />
                    <LoginButton
                        onLogin={onLogin}
                        buttonStyle={styles.loginButton}
                        textStyle={styles.loginText}
                        setModalVisible={setLoginModalVisible}
                    />
                </View>
            </View>
        </>
    )
}

const styles = StyleSheet.create({
    videoContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    video: {
        ...StyleSheet.absoluteFillObject,
        zIndex: -1
    },
    modalContainer: {
        flex: 1
    },
}

这是我的模式弹出窗口：

const LoginModal = ({ isVisible, setVisible, modalStyle }) => {

    return (
        <Modal
            visible={isVisible}
            onRequestClose={() => setLoginModalVisible(false)}
            style={[styles.modalContainer, modalStyle]}
            statusBarTranslucent
        >
            <SafeAreaView style={styles.modalOverlay}>
                <View style={styles.modalView}>
                    {/* Close Button */}
                    <TouchableOpacity
                        onPress={() => setVisible(false)}
                        style={styles.closeButton}
                    >
                        <Text style={styles.closeButtonText}>X</Text>
                    </TouchableOpacity>

                    <Text style={styles.modalTitle}>Login</Text>

                    <TextInput
                        placeholder="Email"
                        style={styles.input}
                        keyboardType="email-address"
                        autoCapitalize="none"
                    />
                    <TextInput
                        placeholder="Passwort"
                        style={styles.input}
                        secureTextEntry
                    />

                    <TouchableOpacity
                        onPress={() => setVisible(false)}
                        style={styles.loginButton}
                    >
                        <Text style={styles.buttonText}>Login</Text>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        </Modal>
    )
}

我遗漏了一些样式，如果需要可以提供。

我现在基本上已经尝试过所有这些，将状态栏放在其他组件中，用各种其他变量和方式更新它，摆脱视频，隔离状态栏和一个更改它的按钮，更改为expo并做出反应-本机状态栏。 无论我做什么，似乎都不会 100% 生成更新。

Answer 1

1. 每当loginModalVisible发生变化时，您可以使用useEffect钩子显式更新StatusBar。

   useEffect(() => {
   StatusBar.setBarStyle(loginModalVisible ? '深色内容' : '浅色内容');
   StatusBar.setBackgroundColor(loginModalVisible ? '#FFFFFF' : '透明');
   }, [loginModalVisible]);

2. 确保显示和隐藏模态框的逻辑一致并正确更新loginModalVisible状态。