TabBarIOS 简单使用

react native 并不是在编译时将 JS 代码编译成原生代码，而是在运行时动态解析 JS 转换成原生控件

所以打包时 JS 文件也会被打包进去，android 中 JS 会被打包到 assets 文件夹下面

bundle.png

无论build ios 包还是 android 包都要保证 packager 服务一直运行， packager 是用来打包资源的，包括所有的 JS 文件，图片等资源。如果没有启动可以通过 react-native start命令启动。

packager.png

TabBarIOS

screen.png

// @flow
import React, {
    Component
} from 'react';
import {
    AppRegistry,
    Text,
    View,
    TabBarIOS,
    StyleSheet
} from 'react-native';

export default class HelloReact extends Component {
    state = {
        selectedTab: 'home' // 默认选中首页
    };

    render() {
        return (
          <TabBarIOS
            tintColor='green' // 文字选中颜色
            unselectedTintColor = 'black' // 文字默认颜色
           >
           <TabBarIOS.Item
             title = "凭证" // 标题
             icon = {require('./images/home.png')} // 默认图标
             selectedIcon = {require('./images/home_sel.png')} // 选中图标
             renderAsOriginal={true}
             selected = {this.state.selectedTab === 'home'} // 是否选中
             onPress={() => { 
               this.setState({selectedTab:'home'});
             }}>
             <Text style={styles.content}>互助</Text>
           </TabBarIOS.Item>
            <TabBarIOS.Item
              title = "凭证"
              icon = {require('./images/cert.png')}
              selectedIcon = {require('./images/cert_sel.png')}
              renderAsOriginal={true}
              selected = {this.state.selectedTab === 'cert'}
              onPress={() => {
                this.setState({selectedTab:'cert'});
              }}>
              <Text style={styles.content}>凭证</Text>
            </TabBarIOS.Item>
            <TabBarIOS.Item
              title = "公示"
              icon = {require('./images/notice.png')}
              selectedIcon = {require('./images/notice_sel.png')}
              renderAsOriginal={true}
              selected = {this.state.selectedTab === 'notice'}
              onPress={() => {
                this.setState({selectedTab:'notice'});
              }}>
            <Text style={styles.content}>公示</Text>
            </TabBarIOS.Item>
            <TabBarIOS.Item
              title = "我的"
              icon = {require('./images/profile.png')}
              selectedIcon = {require('./images/profile_sel.png')}
              renderAsOriginal={true}
              selected = {this.state.selectedTab === 'profile'}
              onPress={() => {
                this.setState({selectedTab:'profile'});
              }}>
            <Text style={styles.content}>我的</Text>
            </TabBarIOS.Item>
          < /TabBarIOS>
        );
    }
}

const styles = StyleSheet.create({
  content: {
    marginTop: 20,
  }
});

AppRegistry.registerComponent('HelloReact', () => HelloReact);

ios 中图片如果没有 @2x @3x 后缀，放到 tabbar 上会显示原图大小，所有这里图片要加上后缀。

images.png

@2x @3x 不止能适配 IOS，同时也会去适配 android，打包时 packager 会把不同尺寸的图片打包到不同分辨率的 drawable 中。 这样就能对 android 和 ios 进行统一处理。

由于 android 中的 TabBar 现在还没有对应的 react native 控件，所以一般也会使用第三方的跨平台控件。 因为除了 TabBar 一般还要处理页面跳转，所以用 React Navigation 可以全部搞定。

Demo