我仍在对React Native进行热身,我有一个非常基本的疑问。我只需要将标签栏和导航器放在同一屏幕上即可。但是选项卡栏基本上覆盖了导航栏,并且视图内容从顶部开始:0而是从导航栏的下方开始。对我有什么帮助吗?
'use strict';
var React = require('react-native');
var RootNav = require('./root.ios');
var {
AppRegistry,
StyleSheet,
View,
NavigatorIOS,
TabBarIOS
} = React;
var memopal = React.createClass({
render: function() {
return (
<View style={styles.container}>
<NavigatorIOS style={styles.nav} initialRoute={{
title : 'my root',
component: RootNav
}}/>
<TabBarIOS style={styles.tabBar}>
<TabBarIOS.Item>
</TabBarIOS.Item>
<TabBarIOS.Item>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FF0000'
},
tabBar: {
backgroundColor: '#00FF00',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 20,
height: 20
}
});
AppRegistry.registerComponent('memopal', () => memopal);
我假设您要在整个应用程序中使用一个TabBar,并为每个TabBarIOS.Item分别使用NavigatorIOS。
var memopal = React.createClass({
render: function() {
return (
<TabBarIOS>
<TabBarIOS.Item
selected={true}
title="View1"
>
<NavigatorIOS
style={styles.nav}
initialRoute={{
title : 'my root',
component: RootNav
}}
/>
</TabBarIOS.Item>
<TabBarIOS.Item>
</TabBarIOS.Item>
</TabBarIOS>
);
}
});
AppRegistry.registerComponent('memopal', () => memopal);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句