我这个modal弹窗此时弹出来后面的状态栏没有被遮挡

视频里的状态栏也被挡住了，

我记得我这边刚开始状态栏也是被modal挡住了，不知道什么时候就失效了，是我的代码有问题还是这又是rn debug模式下的bug？

完整代码如下：

import React, {useState} from 'react';
import {
  SectionList,
  StyleSheet,
  View,
  Modal,
  Text,
  Button,
  TouchableOpacity,
  Image,
} from 'react-native';
import {SectionData} from '../constants/Data';
import icon_close_modal from '../assets/images/icon_close_modal.png';

export default () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const hideModal = () => {
    setVisible(false);
  };

  const renderItem = ({item}) => {
    return <Text style={styles.txt}>{item}</Text>;
  };

  const ListHeader = (
    <View style={styles.header}>
      <Text style={styles.extraTxt}>列表头部</Text>
      <TouchableOpacity style={styles.closeBtn} onPress={() => hideModal()}>
        <Image style={styles.closeImg} source={icon_close_modal} />
      </TouchableOpacity>
    </View>
  );

  const ListFooter = (
    <View style={[styles.header, styles.footer]}>
      <Text style={styles.extraTxt}>列表尾部</Text>
    </View>
  );

  const renderSectionHeader = ({section}) => {
    return <Text style={styles.sectionHeaderTxt}>{section.type}</Text>;
  };

  return (
    <View style={styles.root}>
      <Button title={'按钮'} onPress={() => showModal()} />

      <Modal visible={visible} onRequestClose={() => hideModal()}>
        <View style={styles.content}>
          <SectionList
            style={styles.sectionList}
            sections={SectionData}
            renderItem={renderItem}
            keyExtractor={(item, index) => `${item}-${index}`}
            contentContainerStyle={styles.containerStyle}
            showsVerticalScrollIndicator={false}
            ListHeaderComponent={ListHeader}
            ListFooterComponent={ListFooter}
            renderSectionHeader={renderSectionHeader}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            stickySectionHeadersEnabled={true}
          />
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  content: {
    width: '100%',
    height: '100%',
    backgroundColor: '#FF000030',
  },
  sectionList: {
    width: '100%',
    height: '100%',
  },
  txt: {
    width: '100%',
    height: 56,
    fontSize: 20,
    color: '#333333',
    textAlignVertical: 'center',
  },
  containerStyle: {
    paddingHorizontal: 16,
    paddingTop: 20,
    backgroundColor: '#F5F5F5',
  },
  header: {
    width: '100%',
    height: 48,
    backgroundColor: '#00FF0030',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    backgroundColor: '#FF000030',
  },
  extraTxt: {
    fontSize: 20,
    color: '#666666',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
  sectionHeaderTxt: {
    width: '100%',
    height: 36,
    backgroundColor: '#DDDDDD',
    textAlign: 'center',
    textAlignVertical: 'center',
    fontSize: 20,
    color: '#333333',
    fontWeight: 'bold',
  },
  separator: {
    width: '100%',
    height: 1,
    backgroundColor: '#D0D0D0',
  },
  closeImg: {
    width: 24,
    height: 24,
  },
  closeBtn: {
    width: 24,
    height: 24,
    position: 'absolute',
    right: 16,
  },
});