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

Posted 2023-04-18

【中文标题】如何在 Expo 和 NativeBase 中调整状态栏

【英文标题】：How to adjust for Status Bar in Expo and NativeBase

【发布时间】：2021-11-05 06:17:08

【问题描述】：

我有一个 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>
  );

【参考方案1】：

您可以将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>
  );

【讨论】：

currentHeight 常量仅在 android 中可用...对于 ios 有什么解决方法吗？ reactnative.dev/docs/statusbar#currentheight-android

【参考方案2】：

你看过 SafeAreaContext 组件吗？ 链接：Expo SafeAreaContext

它允许您的内容不低于标准。

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

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

【讨论】：

currentHeight 常量仅在 Android 中可用...对于 ios 有什么解决方法吗？ reactnative.dev/docs/statusbar#currentheight-android

【参考方案3】：

使用常量.statusBarHeight 的 从'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>
      );