如何调整 Expo 和 NativeBase 中的状态栏

Question

我有一个 Expo 应用程序，我正在其中使用 NativeBase 库（https://nativebase.io/）

由于某种原因，应用程序没有针对状态栏进行调整。显示的小部件围绕状态栏区域绘制，而不是通常情况下在状态栏下方开始绘制。

我可以使用 NativeBase 库来调整此 Expo 应用程序中的状态栏高度吗？

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NativeBaseProvider, Box, Text, VStack, HStack, Checkbox, Divider, Heading, Center, ScrollView, FlatList } from 'native-base';

export default function App() {

  var data = [
    {
      id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
      title: "First Item",
    },
    {
      id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
      title: "Second Item",
    },
    {
      id: "58694a0f-3da1-471f-bd96-145571e29d72",
      title: "Third Item",
    },
  ]
  return (
    

    <NativeBaseProvider>
      <Center flex={1}>
        <FlatList
        data={data}
        renderItem={({ item }) => (
          <Box px={5} py={2} rounded="md" my={2} bg="primary.300">
            {item.title}
          </Box>
          
        )}
        keyExtractor={(item) => item.id}
        />
      </Center>
    </NativeBaseProvider>
  );
}

Answer 1

用于Constants.statusBarHeight​import Constants from 'expo-constants';

import React from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import {
  NativeBaseProvider,
  Box,
  Text,
  VStack,
  HStack,
  Checkbox,
  Divider,
  Heading,
  Center,
  ScrollView,
  FlatList,
} from 'native-base';

import Constants from 'expo-constants';

export default function App() {
  var data = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Third Item',
    },
  ];
  return (
    <View style={{ flex: 1, marginTop: Constants.statusBarHeight }}>
      <NativeBaseProvider>
        <Center flex={1}>
          <FlatList
            data={data}
            renderItem={({ item }) => (
              <Box px={5} py={2} rounded="md" my={2} bg="primary.300">
                {item.title}
              </Box>
            )}
            keyExtractor={(item) => item.id}
          />
        </Center>
      </NativeBaseProvider>
    </View>
  );
}