javascript - React Native 中的 TabBarICON 不起作用，项目相互重叠

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 对象中使用渲染函数，react native 在文档中提供了一些很好的示例来说明如何执行此操作: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>