我遇到导航栏覆盖所有内容的问题
index.android.js
export default class RNTodosApp extends Component {
render() {
const routes = [
{title: 'Todos', index: 0}
];
return (
<Provider store={store}>
<View>
<StatusBar
backgroundColor='#0277BD'
barStyle='light-content'
/>
<Navigator
initialRoute={routes[0]}
initialRouteStack={routes}
navigationBar={
<Navigator.NavigationBar
routeMapper={{
LeftButton: (route, navigator, index, navState) =>
{ return; },
RightButton: (route, navigator, index, navState) =>
{ return; },
Title: (route, navigator, index, navState) => {
return (<Text style={styles.title}>{route.title}</Text>);
},
}}
style={styles.navigatorBar}
navigationStyles={Navigator.NavigationBar.StylesIOS}
/>
}
renderScene={(route, navigator) => {
if(route.index === 0) {
return (
<App />
)
}
}} />
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
navigatorBar: {
backgroundColor: '#01579B',
},
title: {
color: '#FFFFFF',
fontSize: 20,
}
});
和App.js文件
class App extends Component {
render() {
console.log('Get called!');
return (
<View style={styles.container}>
<Text>Hello World!</Text>
<Text>Hello World!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
}
})
现在的问题是我不能让Hello World文本显示在屏幕上
谢谢。
我尝试添加和更改alignItems和justifyContent道具,但它仍然不起作用
答案 0 :(得分:0)
我在代码中忘记了flex 1,已经解决了!