TabBarIOS在ReactNative中不工作，项相互重叠

Question

所以我制作了一个应用程序，这是我的代码：

import React, { Component } from 'react';
import {
  View,
  Text,
  TabBarIOS,
  StyleSheet,
  Dimensions
} from 'react-native';
//import Styles from  './LayoutStyle.js';

class Layout extends Component {
  constructor(){
    super()
    this.state = {selectedTab: 'tabThree'}
  }
  setTab(tabId){
    this.setState({selectedTab: tabId})
  }
  render() {
    return(<View style={Styles.Layout}>
      <TabBarIOS>
      <TabBarIOS.Item
      systemIcon='history'
      selected={this.state.selectedTab === 'tabOne'}
      onPress={() => this.setTab('tabOne')}>
      <View>
      <Text>Jure1</Text>
      </View>
      </TabBarIOS.Item>
      <TabBarIOS.Item
      systemIcon='bookmarks'
      selected={this.state.selectedTab === 'tabTwo'}
      onPress={() => this.setTab('tabTwo')}>
      <View>
      <Text>Jure2</Text>
      </View>
      </TabBarIOS.Item>
      <TabBarIOS.Item
      systemIcon='more'
      selected={this.state.selectedTab === 'tabThree'}
      onPress={() => this.setTab('tabThree')}>
      <View>
      <Text>Jure3</Text>
      </View>
      </TabBarIOS.Item>
      </TabBarIOS>
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  Layout: {
    alignItems: "center",
    justifyContent: "center",
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width,
  },

  TabBar: {
    backgroundColor: 'grey'
  }
});

export default Layout;

好吧，我所期望的是一个应用程序，它的底部有一个TabBar，有三个不同的项目可供选择，看起来就像在一个本地的ios应用程序中一样。不是这样的，我得到的是：

​

那我该怎么办？如何设置此项目的样式以避免重叠？有什么想法吗？

Answer 1

布局样式导致内部内容异常集中，将布局样式更改为：

​

Layout: {
   flex:1,
}

​

此外，当尝试从单击的选项卡中绘制场景时，您将希望在TabBarIOS.Item对象中使用一个呈现函数，function本机提供了一些很好的示例，说明如何在文档中这样做：https://facebook.github.io/react-native/docs/tabbarios.html。

我强烈建议为每个对象设置一个导航器，使您能够更好地控制场景的变化：

​

    <TabBarIOS.Item
        systemIcon='history'
        title= 'Jure1'
        selected={this.state.selectedTab === 'tabOne'}
        onPress={() => this.setTab('tabOne')}>
        <View style = {{flex:1}}>
            <Navigator
              renderScene={this._renderScene}
            />
        </View>
    </TabBarIOS.Item>

​