如何针对Expo和NativeBase中的状态栏进行调整
如何针对Expo和NativeBase中的状态栏进行调整
提问于 2021-09-08 13:04:16
我有一个使用NativeBase库(https://nativebase.io/)的世博应用程序
由于某些原因，应用程序没有针对状态栏进行调整。显示的构件在状态栏区域周围绘制，而不是像通常情况下那样直接在状态栏下开始绘制。
如何使用NativeBase库调整此世博会应用程序中的状态栏高度？
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>
);
}回答 3
Stack Overflow用户
发布于 2021-09-08 14:45:30
您可以将NativeBase提供程序包装在视图中，并为其提供flex of 1和marginTop of 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>
);
}Stack Overflow用户
发布于 2021-09-08 15:31:13
你看过SafeAreaContext组件了吗？链接：Expo SafeAreaContext
它允许您的内容不会低于缺口。
如果你知道它，但它不适合你的需要，你可以在StatusBarHeight设置上工作：
import { StyleSheet, View, StatusBar } from 'react-native';
let statusbar = StatusBar.currentHeight
return(<View style={{marginTop: statusbar}} Stack Overflow用户
发布于 2021-09-09 07:07:56
使用从‘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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69103651
复制相关文章
相似问题
腾讯云开发者
