十二、实战底部（二）-白红宇

1.顶部导航为了适配安卓和iOS两个平台使用facebook的第三发组件，组件的导入的方式在十一讲有提到，具体可参考

组件名称：react-native-tab-navigator 导入的命令：npm I react-native-tab-navigator --save 需要导入的组件：

Platform, // 判断当前运行的系统

Navigator

e.g.:

// 每一个TabBarItem    renderTabBarItem(title, iconName, selectedIconName, selectedTab, componentName, component, badgeText){        return(            
     
     } // 图标                renderSelectedIcon={() =>
     }   // 选中的图标                onPress={()=>{this.setState({selectedTab:selectedTab})}}                selected={this.state.selectedTab === selectedTab}                selectedTitleStyle={styles.selectedTitleStyle}                badgeText = {badgeText}            >                
     
      {// 过渡动画                             return Navigator.SceneConfigs.PushFromRight;                        }}                    renderScene={(route,navigator)=>{                           let Component = route.component;                           return 
      
       ;                        }}                />            
      
     
            )    }复制代码

e.g：

/** * Created by hjq on 2017/4/3. */import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    Navigator,    Platform, // 主要用来判断系统版本的    Alert} from 'react-native';// 导入外部组件import TabNavigator from 'react-native-tab-navigator';import Util from './Util';// 导入主要的组件var Home = require('../Home/JQHome');var More = require('../More/JQMore');var Mine = require('../Mine/JQMine');var Shop = require('../Shop/JQShop');var JQMain = React.createClass({    getInitialState() {        return {            selectedTab: 'home' // 默认选择第一个        }    },    render() {        return (            
    
                     {/*首页**/}                {this.renderTabItem('首页', 'icon_tabbar_homepage', 'icon_tabbar_homepage_selected','home','首页', Home,'')}                {/*店铺**/}                {this.renderTabItem('店铺', 'icon_tabbar_merchant_normal', 'icon_tabbar_merchant_selected','shop','店铺', Shop, '20')}                {/*我的**/}                {this.renderTabItem('我的', 'icon_tabbar_mine', 'icon_tabbar_mine_selected','mine','我的', Mine, '88')}                {/*更多**/}                {this.renderTabItem('更多', 'icon_tabbar_misc', 'icon_tabbar_misc_selected','more','更多', More, '199')}            
            );    },    // 每一个组件的item    renderTabItem (title, iconName, selectedIconName, selectedTab, componentName, component, badgeText) {        return (            
     
     }                renderSelectedIcon={() => 
     }                badgeText={badgeText}                selected={this.state.selectedTab === selectedTab}                selectedTitleStyle={styles.selectedTitleStyle}                titleStyle={styles.titleStyle}                renderBadge={() => this.customBadgeView(badgeText)}                onPress={() => this.setState({ selectedTab: selectedTab })}>                
     
      {// 过渡动画                        return Navigator.SceneConfigs.PushFromRight;                    }}                    renderScene={(route,navigator)=>{                        let Component = route.component;                        return 
      
       ;                    }}                />            
      
     
            )    },    // 自定义BageView    customBadgeView(badgeText) {        return (            badgeText ?            
                    
     
                          {badgeText}                    
                 
                    : null        );    }});const styles = StyleSheet.create({    iconStyle: { // 如果图片不设置大小显示不了        width: (Platform.OS === 'ios') ? 30 : 25,        height: (Platform.OS === 'ios') ? 30 : 25,    },    titleStyle: { // tabbar默认的颜色        color: 'black'    },    selectedTitleStyle: { // tabbar选中的颜色        color: 'orange'    },    renderBadgeStyle: {        backgroundColor: 'red'    },    customBadgeViewStyle: {        marginTop: 5,        width:21,        height:21,        justifyContent:'center',        alignItems: 'center',        backgroundColor: 'red',        borderRadius: 10.5,        overflow: 'hidden'    },    customBadgeTextStyle: {        color: 'white',        fontSize: 12    }});// 输出组件module.exports = JQMain;复制代码