React Native-NavigatorIOS和TabBarIOS实现

小马克

我仍在对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);

结果

具有NavigatorIOS的TabBarIOS

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native和require('http')

来自分类Dev

如何使用React Native实现Firebase?

来自分类Dev

React Native-NavigatorIOS

来自分类Dev

在react-native中实现promise和AsyncStorage

来自分类Dev

在NavigatorIOS下未调用React-native组件的componentDidMount()

来自分类Dev

使用react native和redux实现FB登录

来自分类Dev

React Native和{flex:1}

来自分类Dev

React Native和Firebase 3

来自分类Dev

结合React和React-Native

来自分类Dev

React Native:如何实现DatePickerAndroid?

来自分类Dev

在React Native中实现Safari View Controller

来自分类Dev

在React-Native Android中实现ImagePicker

来自分类Dev

区别React Typescript,React JavaScript和React Native?

来自分类Dev

React Native-NavigatorIOS和TabBarIOS实现

来自分类Dev

在react-native中实现promise和AsyncStorage

来自分类Dev

android native和react native之间的通信

来自分类Dev

React Native:如何实现DatePickerAndroid?

来自分类Dev

React Native:TabBarIOS,单击后重新渲染选项卡

来自分类Dev

React Native:将TabBarIOS实施为导航实验

来自分类Dev

在使用react-redux实现react-native时出错

来自分类Dev

流星和React Native

来自分类Dev

使用TabBarIOS在React Native中创建标签

来自分类Dev

react-native:如何结合 react-native-router-flux 和 react-native-drawer?

来自分类Dev

为 React Native 调整 NavigatorIOS 的 zIndex

来自分类Dev

在 React 和 React Native 中使用模型

来自分类Dev

removeImageForTag() 未实现(React Native)

来自分类Dev

React Native - android 和 iOS?

来自分类Dev

Promises 和 React Native 协助

来自分类Dev

Flex 和布局 (React Native)