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 (

tintColor='green' // 文字选中颜色

unselectedTintColor = 'black' // 文字默认颜色

>

title = "凭证" // 标题

icon = {require('./images/home.png')} // 默认图标

selectedIcon = {require('./images/home_sel.png')} // 选中图标

renderAsOriginal={true}

selected = {this.state.selectedTab === 'home'} // 是否选中

onPress={() => {

this.setState({selectedTab:'home'});

}}>

互助

title = "凭证"

icon = {require('./images/cert.png')}

selectedIcon = {require('./images/cert_sel.png')}

renderAsOriginal={true}

selected = {this.state.selectedTab === 'cert'}

onPress={() => {

this.setState({selectedTab:'cert'});

}}>

凭证

title = "公示"

icon = {require('./images/notice.png')}

selectedIcon = {require('./images/notice_sel.png')}

renderAsOriginal={true}

selected = {this.state.selectedTab === 'notice'}

onPress={() => {

this.setState({selectedTab:'notice'});

}}>

公示

title = "我的"

icon = {require('./images/profile.png')}

selectedIcon = {require('./images/profile_sel.png')}

renderAsOriginal={true}

selected = {this.state.selectedTab === 'profile'}

onPress={() => {

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 可以全部搞定。