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

结果