如何在Expo与NativeBase项目中适配Status Bar高度

适配方案1：使用NativeBase内置安全区组件（推荐） #

NativeBase自带了SafeAreaView组件，可自动适配全平台的状态栏、刘海屏、底部手势条等安全区域，是成本最低的适配方案。
修改后的完整代码如下：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NativeBaseProvider, Box, Center, FlatList, SafeAreaView } from 'native-base';

export default function App() {
  const 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>
      {/* 用SafeAreaView包裹最外层内容即可自动预留安全区 */}
      <SafeAreaView flex={1}>
        <StatusBar style="auto" />
        <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>
      </SafeAreaView>
    </NativeBaseProvider>
  );
}

适配方案2：手动指定顶部内边距 #

如果不需要适配底部安全区，仅需要避开状态栏，可以用useSafeAreaInsets钩子获取状态栏高度，手动给外层容器加顶部内边距：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NativeBaseProvider, Box, Center, FlatList, useSafeAreaInsets } from 'native-base';

export default function App() {
  // 获取顶部状态栏高度
  const insets = useSafeAreaInsets();
  const data = [/* 此处省略和上文一致的列表数据 */]
  return (
    <NativeBaseProvider>
      <Box flex={1} pt={insets.top}>
        <StatusBar style="auto" />
        <Center flex={1}>
          {/* 此处省略和上文一致的列表代码 */}
        </Center>
      </Box>
    </NativeBaseProvider>
  );
}

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