我正在尝试为我的 React Native Expo 应用程序实现导航栏。这里有一个问题:
"dependencies": {
"expo": "^18.0.3",
"react": "16.0.0-alpha.12",
"react-native": "^0.45.1",
"react-navigation": "^1.0.0-beta.11"
}
我不知道在哪里以及如何设置该组件的样式以使其不与通知栏重叠。我尝试设置marginTop: StatusBar.currentHeight
对于我的根视图,但它不起作用。它在视图上应用了边距,但不在导航栏上应用了边距。
My App:
import {StackNavigator} from 'react-navigation';
import Home from './app/screens/Home';
export default App = StackNavigator({
Home: { screen: Home }
})
Home:
export default class Home extends Component {
constructor() {
super();
// <...>
}
static navigationOptions = {
title: 'Welcome'
};
// <...>
}
如果您将整个应用程序包装在View
有了上边距,它就会起作用。
例子:https://snack.expo.io/r1gb9TGH- https://snack.expo.io/r1gb9TGH-
将来,我们将把它构建到反应导航中,这样它就会自动为你发生。
import React, {Component} from 'react';
import {StatusBar, View} from 'react-native'
import {StackNavigator} from 'react-navigation';
import Home from './app/screens/Home';
const RootNavigator = StackNavigator({
Home: { screen: Home }
})
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
<RootNavigator />
</View>
)
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)