React Native使用Expo AV视频播放器全屏时状态栏变白问题咨询

• Expo AV的原生控制栏触发全屏时，会调用系统原生的全屏播放器视图，该视图默认将状态栏背景色设为白色，若你项目全局配置的状态栏文字为浅色，就会出现文字与背景同色的“状态栏变白”现象
• 当前代码未监听视频的全屏切换事件，无法在进入/退出全屏时主动调整状态栏样式适配当前场景
• 额外注意：你当前代码中Video组件重复声明了style属性，会导致上方styles.video的配置被覆盖，属于可优化的代码问题

1. 先安装状态栏控制依赖：
   expo install expo-status-bar
2. 修改组件代码，添加全屏状态监听和状态栏动态切换逻辑，参考代码如下：

import React, { useState, useRef } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import pure from 'recompose/pure';
import { Video, FullscreenUpdate } from 'expo-av';
import { StatusBar } from 'expo-status-bar';

const { width } = Dimensions.get('window');

const Product_stack_video = ({ uri }) => {
  const video = useRef(null);
  // 存储当前是否是全屏状态
  const [isFullscreen, setIsFullscreen] = useState(false);

  // 监听全屏切换事件
  const handleFullscreenUpdate = (event) => {
    if (event.fullscreenUpdate === FullscreenUpdate.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) {
      // 进入全屏时，把状态栏文字改成深色，适配白色状态栏背景
      setIsFullscreen(true);
    } else if (event.fullscreenUpdate === FullscreenUpdate.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS) {
      // 退出全屏时，恢复你原来的状态栏样式
      setIsFullscreen(false);
    }
  };

  return (
    <>
      <StatusBar style={isFullscreen ? 'dark' : 'light'} />
      <Video
        ref={video}
        shouldPlay={true}
        style={styles.video}
        source={{
          uri: uri || 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onFullscreenUpdate={handleFullscreenUpdate}
      />
    </>
  )
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    width: '100%',
    height: 500,
  },
});

export default pure(Product_stack_video);

如果需要修改全屏状态下的状态栏背景色，可以额外引入react-native的StatusBar模块，在进入全屏时设置StatusBar.setBackgroundColor('你想要的颜色')，退出时恢复原有颜色即可。

问题现象参考 #

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