React Native - NavigatorIOS和TabBarIOS实现

Question

我还在为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);

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);

结果