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 (
          
            { 
               this.setState({selectedTab:'home'});
             }}>
             互助
           
             {
                this.setState({selectedTab:'cert'});
              }}>
              凭证
            
             {
                this.setState({selectedTab:'notice'});
              }}>
            公示
            
             {
                this.setState({selectedTab:'profile'});
              }}>
            我的
            
          < /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