响应本机- NavigatorIOS和TabBarIOS实现

Question

我还在热身于React原住民，我有一个非常基本的疑问。我只需要将选项卡栏和导航器放在同一个屏幕上。但是制表栏基本上是覆盖导航栏的，视图内容从顶部开始: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);

Answer 1

我假设，您希望在整个应用程序中单独使用一个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);

结果

​

​