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

sqxo8psd 于 2023-08-07 发布在 React

关注(0)|答案(3)|浏览(159)

我有一个Expo应用程序，我正在使用NativeBase Library（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>
  );
}

字符串

react-native

来源：https://stackoverflow.com/questions/69103651/how-to-adjust-for-status-bar-in-expo-and-nativebase

3条答案

按热度按时间

scyqe7ek1#

使用import Constants from 'expo-constants';中的Constants.statusBarHeight

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

字符串

赞(0）回复(0）举报 2023-08-07

6kkfgxo02#

您可以将NativeBase Provider Package 在视图中，并将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>
  );
}

字符串

赞(0）回复(0）举报 2023-08-07

7kjnsjlb3#

您是否查看过SafeAreaContext组件？链接：Expo SafeAreaContext
它可以让你的内容不会得到下凹口。
如果您知道它，但它不符合您的需求，您可以对StatusBarHeight设置进行操作：

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

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

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

3条答案

相关问题

热门标签

最新问答