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

布局样式导致内部内容奇怪地居中，将布局样式更改为：

＆＃13;

Layout: {
   flex:1,
}

＆＃13;

此外，当尝试从单击的选项卡中绘制场景时，您将需要在TabBarIOS.Item对象中使用渲染功能，react native在文档中提供了一些很好的示例：https://facebook.github.io/react-native/docs/tabbarios.html

我强烈建议为每个对象放置一个导航器，以便您可以更好地控制场景变化：

＆＃13;

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

＆＃13;

ReactNative中的TabBarIOS不起作用，项目相互重叠

1 个答案: