问题
I am trying to implement navigation bar for my React Native Expo app. Here is a problem:
"dependencies": {
"expo": "^18.0.3",
"react": "16.0.0-alpha.12",
"react-native": "^0.45.1",
"react-navigation": "^1.0.0-beta.11"
}
I don't know where and how I can set up styles for this component to make it not overlap with notifications bar. I tried to set marginTop: StatusBar.currentHeight
for my root View but it didn't work. It applied the margin on the View but not on the navigation bar.
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'
};
// <...>
}
回答1:
If you wrap your entire app in a View
with a top margin, it will work.
Example: https://snack.expo.io/r1gb9TGH-
In the future, we're going to build this into react-navigation so it happens for you automatically.
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>
)
}
}
来源:https://stackoverflow.com/questions/45044941/react-native-expo-stacknavigator-overlaps-notification-bar