react native 并不是在編譯時(shí)將 JS 代碼編譯成原生代碼，而是在運(yùn)行時(shí)動(dòng)態(tài)解析 JS 轉(zhuǎn)換成原生控件

所以打包時(shí) JS 文件也會(huì)被打包進(jìn)去，android 中 JS 會(huì)被打包到 assets 文件夾下面

bundle.png

無論build ios 包還是 android 包都要保證 packager 服務(wù)一直運(yùn)行， packager 是用來打包資源的，包括所有的 JS 文件，圖片等資源。如果沒有啟動(dòng)可以通過 react-native start命令啟動(dòng)。

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' // 默認(rèn)選中首頁
    };

    render() {
        return (
          <TabBarIOS
            tintColor='green' // 文字選中顏色
            unselectedTintColor = 'black' // 文字默認(rèn)顏色
           >
           <TabBarIOS.Item
             title = "憑證" // 標(biāo)題
             icon = {require('./images/home.png')} // 默認(rèn)圖標(biāo)
             selectedIcon = {require('./images/home_sel.png')} // 選中圖標(biāo)
             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 上會(huì)顯示原圖大小，所有這里圖片要加上后綴。

images.png

@2x @3x 不止能適配 IOS，同時(shí)也會(huì)去適配 android，打包時(shí) packager 會(huì)把不同尺寸的圖片打包到不同分辨率的 drawable 中。 這樣就能對(duì) android 和 ios 進(jìn)行統(tǒng)一處理。

由于 android 中的 TabBar 現(xiàn)在還沒有對(duì)應(yīng)的 react native 控件，所以一般也會(huì)使用第三方的跨平臺(tái)控件。 因?yàn)槌?TabBar 一般還要處理頁面跳轉(zhuǎn)，所以用 React Navigation 可以全部搞定。

Demo