如何调整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>
  );
}

Answer 2

您可以将您的

NativeBase

Provider 包装在视图内，并为其指定

flex of 1

和

marginTop

 的 

StatusBar.currentHeight

如下图

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';

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: StatusBar.currentHeight }}>
      <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>
  );
}

Answer 3

您查看过 SafeAreaContext 组件吗？ 链接：Expo SafeAreaContext

它可以让您的内容不会低于标准。

如果您知道，但它不符合您的需求，您可以进行 StatusBarHeight 设置：

import { StyleSheet, View, StatusBar } from 'react-native';
    
let statusbar = StatusBar.currentHeight
    
return(<View style={{marginTop: statusbar}} 

Answer 4

尝试这个间距

从'@react-navigation/elements'导入{useHeaderHeight};

const headerHeight = useHeaderHeight();

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';
import { useHeaderHeight } from '@react-navigation/elements';


export default function App() {
  const headerHeight = useHeaderHeight();


  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: headerHeight }}>
        <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>
  );
}