[JamProject][SVG TabNavigator]待...

Root.js 2016-04-09

待:提取相同的代碼。
SVG to Base64

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  TabBarIOS,
  // TabBarItemIOS,
  NavigatorIOS,
} from 'react-native';

var ReactART = React.ART;
var {
    Group,
    Shape,
    // Circle,
    Surface,
    Transform,
    Rectangle,
} = ReactART;

import Recommend from './Recommend';
import Home from './Home';
import Merchant  from './Merchant';
import SVGIcon from './SVGIcon';
// 使用的是來自 https://github.com/exponentjs/react-native-tab-navigator 的組件
import TabNavigator from '../components/TabNavigator/TabNavigator';
var TabNavigatorItem = TabNavigator.Item;


export default class Root extends Component
{


  // getInitialState(){
  //   return {
  //     selectedTab: "recommend"
  //   };
  // }


  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'Home',
    };
  }




  // 進(jìn)行渲染頁面內(nèi)容
  _renderContent(title: ?string) {
    return (
      // 千萬別忘了 flex:1, 否則無界面顯示
      <NavigatorIOS
        style={{flex:1}}
        initialRoute={{
          translucent: false,
          component:Home,
          title:title,
        }}
        />

    );
  }


  // Missing parameter,用于不能缺省的參數(shù)
  throwIfMissing = ()=> {
    throw new Error('缺少參數(shù)');
  }



  _defaultRenderIcon = ()=>{};

  // 推薦tabItem icon
  _tabHomeIcon = (selected=false)=>{
    return (
      <Surface
        width = {26}
        height = {30}
        style = {{margin:-3}}
        >
        <Group scale = {0.9}>
          <Shape
            fill={selected? '#ff5942':'#ccc'}
            d={'M13.3,0C7.6,0,2.9,4.7,2.9,10.5c0,1,0.1,2,0.4,3c1.4,5.7,9.2,11.8,9.5,12.1l0.6,0.4l0.5-0.4 c0.4-0.3,9.2-7.2,9.8-13.3v-0.2c0.1-0.5,0.1-1.1,0.1-1.6C23.8,4.7,19.1,0,13.3,0z M21.9,12.1l-0.1,0.9c-1,4.3-6.6,9.2-8.4,10.8 c-1.7-1.5-7.2-6.4-8.3-10.8c-0.2-0.8-0.4-1.6-0.4-2.5c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7C22,11,21.9,11.6,21.9,12.1z'}
            />
          <Shape
            fill={selected? '#ff5942':'#ccc'}
            d={'M16,6.4c-1.3,0-2.1,0.5-2.7,1.1c-0.6-0.6-1.4-1.1-2.7-1.1c-2,0-3.5,1.4-3.5,3.4c0,1.2,0.6,2.4,1.6,3.4 l3.9,3.8c0.1,0.2,0.4,0.3,0.6,0.3c0.2,0,0.5-0.1,0.7-0.3l3.9-3.8c1-1,1.6-2.2,1.6-3.4C19.5,7.8,18,6.4,16,6.4z M16.6,11.9    c0,0-2.5,2.5-3.3,3.2c-0.8-0.8-3.2-3.2-3.2-3.2c-0.7-0.7-1-1.4-1-2c0-0.9,0.6-1.5,1.7-1.5c0.9,0,1.1,0.3,1.8,1.1l0.1,0.1 c0.2,0.1,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3l0.1-0.1c0.6-0.8,0.9-1.1,1.8-1.1c0.9,0,1.5,0.6,1.5,1.5 C17.6,10.5,17.2,11.3,16.6,11.9z'}
            />
        </Group>
      </Surface>
    );
  }

  // 圖庫tabItem icon
  _tabAlbumIcon = (selected=false)=> {
    return (
      <Surface
        width={26}
        height={30}
        style = {{margin: -3}}
        >
        <Group scale={0.9}>
            <Shape
                fill={selected? '#ff5942':'#ccc'}
                d={'M23.2,1H7C5.4,1,4.2,2.3,4.2,3.8V3L1.9,3.6C0.5,4-0.3,5.4,0.1,6.8l4.2,15.3v0.1c0,1.6,1.3,2.8,2.8,2.8h16.2 c1.5,0,2.8-1.3,2.7-2.9v-1.4v-1.4V3.8C26,2.3,24.7,1,23.2,1z M4.2,17L1.7,7.8C1.3,6.4,2.2,4.9,3.6,4.5l0.6-0.2l0,0V17z M24.7,20.8   c0,1.6-1.3,2.8-2.8,2.8H8.5c-1.5,0-2.8-1.3-2.8-2.8v-0.1L24.7,20.8L24.7,20.8L24.7,20.8z M24.7,19.4h-19V5.2c0-1.6,1.3-2.8,2.8-2.8 h13.4c1.6,0,2.8,1.3,2.8,2.8V19.4L24.7,19.4z'}
            />
            <Shape
                fill={selected? '#ff5942':'#ccc'}
                d={'M10.9,10.9c1.8,0,3.2-1.4,3.2-3.2s-1.4-3.2-3.2-3.2S7.7,6,7.7,7.8S9.1,10.9,10.9,10.9z M10.9,6 c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8c-1,0-1.8-0.8-1.8-1.8S9.9,6,10.9,6z'}
            />

            <Shape
                fill={selected? '#ff5942':'#ccc'}
                d={'M18.2,10.8c-0.1,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.1-0.2-0.1-0.2c-0.3-0.3-0.7-0.3-1,0l-3.7,3.7l-1-1.1 C12,13,11.7,13,11.6,13l-0.1-0.1c-0.3-0.3-0.7-0.3-1,0l-2.3,2.5c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,0.9,0l2.1-2.1l1.4,1.4 c0.3,0.3,0.7,0.3,1,0c0.1,0,0.2-0.1,0.3-0.1l3.4-3.4l4.2,4.2c0.3,0.3,0.7,0.3,1,0c0.3-0.3,0.3-0.7,0-1L18.2,10.8z'}
            />
        </Group>
      </Surface>
    );
  }
  // 商家tabItem icon
  _tabMerchantIcon = (selected=false)=> {
    return (
      <Surface
        width = {26}
        height = {30}
        style = {{margin:-3}}
        >
        <Group scale = {0.9}>
          <Shape
            fill={selected? '#ff5942':'#ccc'}
            d={'M26,6c0-1.6-1.3-2.9-2.9-2.9h-5.9C16.7,1.4,15,0.2,13,0.2c-2,0-3.6,1.3-4.1,2.9h-6C1.3,3.1,0,4.4,0,6v5h1.8 c-0.2,0.4-0.4,0.9-0.4,1.4v10.2c0,1.6,1.3,2.9,2.9,2.9h17.4c1.6,0,2.9-1.3,2.9-2.9V12.4c0-0.5-0.1-1-0.4-1.4H26V6z M12.9,1.7    c1.1,0,2,0.6,2.4,1.5h-4.8C10.9,2.3,11.9,1.7,12.9,1.7z M23.1,21.4c0,1.5-1.3,2.7-2.9,2.7H5.7c-1.6,0-2.9-1.2-2.9-2.7v-7.5  c0-1.5,1.3-2.7,2.9-2.7h14.5c1.6,0,2.9,1.2,2.9,2.7V21.4z M24.5,9.6H1.3V7.5c0-1.6,1.3-2.9,2.9-2.9h17.4c1.6,0,2.9,1.3,2.9,2.9V9.6  z'}
            />

          <Shape
            fill={selected? '#ff5942':'#ccc'}
            d={'M15.3,12.9c-0.9,0-1.8,0.4-2.4,1.2c-0.6-0.7-1.4-1.2-2.4-1.2c-1.7,0-3,1.4-3,3.2c0,0.5,0.1,1,0.4,1.4 c1,1.6,4.6,5.3,4.8,5.5c0.1,0.1,0.2,0.1,0.2,0.1c0.1,0,0.1,0,0.2-0.1c0.2-0.2,3.8-3.9,4.8-5.5c0.2-0.4,0.4-0.8,0.4-1.4    C18.4,14.4,17,12.9,15.3,12.9z M16.8,16.8c-0.6,1-2.8,3.3-3.9,4.5C11.7,20,9.6,17.7,9,16.8c-0.1-0.2-0.2-0.4-0.2-0.6    c0-1,0.7-1.8,1.7-1.8c0.7,0,1.2,0.3,1.5,1c0.2,0.3,0.5,0.6,0.9,0.6c0.4,0,0.8-0.2,0.9-0.6c0.4-0.6,0.9-1,1.5-1 c0.9,0,1.8,0.8,1.8,1.8C17,16.3,17,16.6,16.8,16.8z'}
            />
        </Group>
      </Surface>
    );
  }



  _renderTabItem = (title='Tab', tabTag=this.throwIfMissing(), renderIcon=this.throwIfMissing(), renderSelectedIcon, containerView=<View style={[styles.container, {backgroundColor:'green'}]}></View>)=> {
    return (
      <TabNavigator.Item
        title={title}
        selectedTitleStyle={styles.selectedTitleStyle}
        selected={this.state.selectedTab === tabTag}
        onPress={()=>this.setState({selectedTab:tabTag})}
        renderIcon={renderIcon}
        renderSelectedIcon={renderSelectedIcon}
        >
        {containerView}
      </TabNavigator.Item>
    );
  };



  render(){
    return (
      <TabNavigator>
        {this._renderTabItem('推薦', 'Home', ()=>this._tabHomeIcon(), ()=>this._tabHomeIcon(true), )}
        {this._renderTabItem('圖庫', 'Album', ()=>this._tabAlbumIcon(), ()=>this._tabAlbumIcon(true), )}
        {this._renderTabItem('商家', 'Merchant', ()=>this._tabMerchantIcon(), ()=>this._tabMerchantIcon(true), )}
      </TabNavigator>
    );
  }

};


const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  selectedTitleStyle:{
    color:'#ff5942',
  },
});




// module.exports = Root;

Root.js 2016-04-10第一步抽取

在類外部定義常量,用于存儲SVG路徑(注意:僅適用于當(dāng)前SVG, 因為都是d屬性)

const homePaths = ['M13.3,0C7.6,0,2.9,4.7,2.9,10.5c0,1,0.1,2,0.4,3c1.4,5.7,9.2,11.8,9.5,12.1l0.6,0.4l0.5-0.4 c0.4-0.3,9.2-7.2,9.8-13.3v-0.2c0.1-0.5,0.1-1.1,0.1-1.6C23.8,4.7,19.1,0,13.3,0z M21.9,12.1l-0.1,0.9c-1,4.3-6.6,9.2-8.4,10.8 c-1.7-1.5-7.2-6.4-8.3-10.8c-0.2-0.8-0.4-1.6-0.4-2.5c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7C22,11,21.9,11.6,21.9,12.1z',
                    'M16,6.4c-1.3,0-2.1,0.5-2.7,1.1c-0.6-0.6-1.4-1.1-2.7-1.1c-2,0-3.5,1.4-3.5,3.4c0,1.2,0.6,2.4,1.6,3.4 l3.9,3.8c0.1,0.2,0.4,0.3,0.6,0.3c0.2,0,0.5-0.1,0.7-0.3l3.9-3.8c1-1,1.6-2.2,1.6-3.4C19.5,7.8,18,6.4,16,6.4z M16.6,11.9   c0,0-2.5,2.5-3.3,3.2c-0.8-0.8-3.2-3.2-3.2-3.2c-0.7-0.7-1-1.4-1-2c0-0.9,0.6-1.5,1.7-1.5c0.9,0,1.1,0.3,1.8,1.1l0.1,0.1 c0.2,0.1,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3l0.1-0.1c0.6-0.8,0.9-1.1,1.8-1.1c0.9,0,1.5,0.6,1.5,1.5 C17.6,10.5,17.2,11.3,16.6,11.9z'];

類內(nèi)部修改添加函數(shù)

  _tabItemIcon = (selected=false, paths)=>{
    return (
      paths.map( (item, index)=>{
        return (
          <Shape key={index}
            fill={selected? '#ff5942':'#ccc'}
            d={item}
            />
        );
      } )
    );
  }

  

  // 推薦tabItem icon
  _tabHomeIcon = (selected=false)=>{
    return (
      <Surface
        width = {26}
        height = {30}
        style = {{margin:-3}}
        >
        <Group scale = {0.9}>
          {/* 未封裝 */}
          {/*
            <Shape
              fill={selected? '#ff5942':'#ccc'}
              d={'M13.3,0C7.6,0,2.9,4.7,2.9,10.5c0,1,0.1,2,0.4,3c1.4,5.7,9.2,11.8,9.5,12.1l0.6,0.4l0.5-0.4 c0.4-0.3,9.2-7.2,9.8-13.3v-0.2c0.1-0.5,0.1-1.1,0.1-1.6C23.8,4.7,19.1,0,13.3,0z M21.9,12.1l-0.1,0.9c-1,4.3-6.6,9.2-8.4,10.8   c-1.7-1.5-7.2-6.4-8.3-10.8c-0.2-0.8-0.4-1.6-0.4-2.5c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7C22,11,21.9,11.6,21.9,12.1z'}
              />
            <Shape
              fill={selected? '#ff5942':'#ccc'}
              d={'M16,6.4c-1.3,0-2.1,0.5-2.7,1.1c-0.6-0.6-1.4-1.1-2.7-1.1c-2,0-3.5,1.4-3.5,3.4c0,1.2,0.6,2.4,1.6,3.4 l3.9,3.8c0.1,0.2,0.4,0.3,0.6,0.3c0.2,0,0.5-0.1,0.7-0.3l3.9-3.8c1-1,1.6-2.2,1.6-3.4C19.5,7.8,18,6.4,16,6.4z M16.6,11.9  c0,0-2.5,2.5-3.3,3.2c-0.8-0.8-3.2-3.2-3.2-3.2c-0.7-0.7-1-1.4-1-2c0-0.9,0.6-1.5,1.7-1.5c0.9,0,1.1,0.3,1.8,1.1l0.1,0.1 c0.2,0.1,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3l0.1-0.1c0.6-0.8,0.9-1.1,1.8-1.1c0.9,0,1.5,0.6,1.5,1.5 C17.6,10.5,17.2,11.3,16.6,11.9z'}
              />
            */}

          {this._tabItemIcon(selected, homePaths)}

        </Group>
      </Surface>
    );
  }

Root.js 進(jìn)行第二步,為了方便今后拓展

homePaths數(shù)組的組成元素荠藤，有字符串改成字典類型數(shù)據(jù)

const homePaths = [{path:'M13.3,0C7.6,0,2.9,4.7,2.9,10.5c0,1,0.1,2,0.4,3c1.4,5.7,9.2,11.8,9.5,12.1l0.6,0.4l0.5-0.4 c0.4-0.3,9.2-7.2,9.8-13.3v-0.2c0.1-0.5,0.1-1.1,0.1-1.6C23.8,4.7,19.1,0,13.3,0z M21.9,12.1l-0.1,0.9c-1,4.3-6.6,9.2-8.4,10.8    c-1.7-1.5-7.2-6.4-8.3-10.8c-0.2-0.8-0.4-1.6-0.4-2.5c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7C22,11,21.9,11.6,21.9,12.1z'},
                     {path:'M16,6.4c-1.3,0-2.1,0.5-2.7,1.1c-0.6-0.6-1.4-1.1-2.7-1.1c-2,0-3.5,1.4-3.5,3.4c0,1.2,0.6,2.4,1.6,3.4 l3.9,3.8c0.1,0.2,0.4,0.3,0.6,0.3c0.2,0,0.5-0.1,0.7-0.3l3.9-3.8c1-1,1.6-2.2,1.6-3.4C19.5,7.8,18,6.4,16,6.4z M16.6,11.9    c0,0-2.5,2.5-3.3,3.2c-0.8-0.8-3.2-3.2-3.2-3.2c-0.7-0.7-1-1.4-1-2c0-0.9,0.6-1.5,1.7-1.5c0.9,0,1.1,0.3,1.8,1.1l0.1,0.1 c0.2,0.1,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3l0.1-0.1c0.6-0.8,0.9-1.1,1.8-1.1c0.9,0,1.5,0.6,1.5,1.5 C17.6,10.5,17.2,11.3,16.6,11.9z'}];

相應(yīng)的修改_tabItemIcon函數(shù)

  _tabItemIcon = (selected=false, paths)=>{
    return (
      paths.map( (item, index)=>{
        return (
          <Shape key={index}
            fill={selected? '#ff5942':'#ccc'}
            d={item.path}
            />
        );
      } )
    );
  }

Root.js 進(jìn)行第三步伙单，簡化代碼

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  TabBarIOS,
  // TabBarItemIOS,
  NavigatorIOS,
} from 'react-native';

var ReactART = React.ART;
var {
    Group,
    Shape,
    // Circle,
    Surface,
    Transform,
    Rectangle,
} = ReactART;

import Recommend from './Recommend';
import Home from './Home';
import Merchant  from './Merchant';
import SVGIcon from './SVGIcon';
// 使用的是來自 https://github.com/exponentjs/react-native-tab-navigator 的組件
import TabNavigator from '../components/TabNavigator/TabNavigator';
var TabNavigatorItem = TabNavigator.Item;

// 首頁/推薦 tabItem SVG Paths
const homeSVGPaths = [{path:'M13.3,0C7.6,0,2.9,4.7,2.9,10.5c0,1,0.1,2,0.4,3c1.4,5.7,9.2,11.8,9.5,12.1l0.6,0.4l0.5-0.4 c0.4-0.3,9.2-7.2,9.8-13.3v-0.2c0.1-0.5,0.1-1.1,0.1-1.6C23.8,4.7,19.1,0,13.3,0z M21.9,12.1l-0.1,0.9c-1,4.3-6.6,9.2-8.4,10.8    c-1.7-1.5-7.2-6.4-8.3-10.8c-0.2-0.8-0.4-1.6-0.4-2.5c0-4.8,3.9-8.7,8.7-8.7c4.8,0,8.7,3.9,8.7,8.7C22,11,21.9,11.6,21.9,12.1z'},
                      {path:'M16,6.4c-1.3,0-2.1,0.5-2.7,1.1c-0.6-0.6-1.4-1.1-2.7-1.1c-2,0-3.5,1.4-3.5,3.4c0,1.2,0.6,2.4,1.6,3.4 l3.9,3.8c0.1,0.2,0.4,0.3,0.6,0.3c0.2,0,0.5-0.1,0.7-0.3l3.9-3.8c1-1,1.6-2.2,1.6-3.4C19.5,7.8,18,6.4,16,6.4z M16.6,11.9    c0,0-2.5,2.5-3.3,3.2c-0.8-0.8-3.2-3.2-3.2-3.2c-0.7-0.7-1-1.4-1-2c0-0.9,0.6-1.5,1.7-1.5c0.9,0,1.1,0.3,1.8,1.1l0.1,0.1 c0.2,0.1,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3l0.1-0.1c0.6-0.8,0.9-1.1,1.8-1.1c0.9,0,1.5,0.6,1.5,1.5 C17.6,10.5,17.2,11.3,16.6,11.9z'}];


// 圖庫 tabItem SVG Paths
const albumSVGPaths = [{path:'M23.2,1H7C5.4,1,4.2,2.3,4.2,3.8V3L1.9,3.6C0.5,4-0.3,5.4,0.1,6.8l4.2,15.3v0.1c0,1.6,1.3,2.8,2.8,2.8h16.2   c1.5,0,2.8-1.3,2.7-2.9v-1.4v-1.4V3.8C26,2.3,24.7,1,23.2,1z M4.2,17L1.7,7.8C1.3,6.4,2.2,4.9,3.6,4.5l0.6-0.2l0,0V17z M24.7,20.8   c0,1.6-1.3,2.8-2.8,2.8H8.5c-1.5,0-2.8-1.3-2.8-2.8v-0.1L24.7,20.8L24.7,20.8L24.7,20.8z M24.7,19.4h-19V5.2c0-1.6,1.3-2.8,2.8-2.8 h13.4c1.6,0,2.8,1.3,2.8,2.8V19.4L24.7,19.4z'},
                      {path:'M10.9,10.9c1.8,0,3.2-1.4,3.2-3.2s-1.4-3.2-3.2-3.2S7.7,6,7.7,7.8S9.1,10.9,10.9,10.9z M10.9,6    c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8c-1,0-1.8-0.8-1.8-1.8S9.9,6,10.9,6z'},
                      {path:'M18.2,10.8c-0.1,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.1-0.2-0.1-0.2c-0.3-0.3-0.7-0.3-1,0l-3.7,3.7l-1-1.1    C12,13,11.7,13,11.6,13l-0.1-0.1c-0.3-0.3-0.7-0.3-1,0l-2.3,2.5c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,0.9,0l2.1-2.1l1.4,1.4 c0.3,0.3,0.7,0.3,1,0c0.1,0,0.2-0.1,0.3-0.1l3.4-3.4l4.2,4.2c0.3,0.3,0.7,0.3,1,0c0.3-0.3,0.3-0.7,0-1L18.2,10.8z'},];

// 商家 tabItem SVG Paths
const merchantSVGPaths = [{path:'M26,6c0-1.6-1.3-2.9-2.9-2.9h-5.9C16.7,1.4,15,0.2,13,0.2c-2,0-3.6,1.3-4.1,2.9h-6C1.3,3.1,0,4.4,0,6v5h1.8    c-0.2,0.4-0.4,0.9-0.4,1.4v10.2c0,1.6,1.3,2.9,2.9,2.9h17.4c1.6,0,2.9-1.3,2.9-2.9V12.4c0-0.5-0.1-1-0.4-1.4H26V6z M12.9,1.7    c1.1,0,2,0.6,2.4,1.5h-4.8C10.9,2.3,11.9,1.7,12.9,1.7z M23.1,21.4c0,1.5-1.3,2.7-2.9,2.7H5.7c-1.6,0-2.9-1.2-2.9-2.7v-7.5  c0-1.5,1.3-2.7,2.9-2.7h14.5c1.6,0,2.9,1.2,2.9,2.7V21.4z M24.5,9.6H1.3V7.5c0-1.6,1.3-2.9,2.9-2.9h17.4c1.6,0,2.9,1.3,2.9,2.9V9.6  z'},
                         {path:'M15.3,12.9c-0.9,0-1.8,0.4-2.4,1.2c-0.6-0.7-1.4-1.2-2.4-1.2c-1.7,0-3,1.4-3,3.2c0,0.5,0.1,1,0.4,1.4 c1,1.6,4.6,5.3,4.8,5.5c0.1,0.1,0.2,0.1,0.2,0.1c0.1,0,0.1,0,0.2-0.1c0.2-0.2,3.8-3.9,4.8-5.5c0.2-0.4,0.4-0.8,0.4-1.4    C18.4,14.4,17,12.9,15.3,12.9z M16.8,16.8c-0.6,1-2.8,3.3-3.9,4.5C11.7,20,9.6,17.7,9,16.8c-0.1-0.2-0.2-0.4-0.2-0.6    c0-1,0.7-1.8,1.7-1.8c0.7,0,1.2,0.3,1.5,1c0.2,0.3,0.5,0.6,0.9,0.6c0.4,0,0.8-0.2,0.9-0.6c0.4-0.6,0.9-1,1.5-1 c0.9,0,1.8,0.8,1.8,1.8C17,16.3,17,16.6,16.8,16.8z'}];

const homeTabTag = 'Home';
const albumTabTag = 'Album';
const merchantTabTag = 'Merchant';
const defaultTabTag = homeTabTag;

export default class Root extends Component
{


  constructor(props) {
    super(props);
    this.state = {
      selectedTab: defaultTabTag,
    };
  }



  // Missing parameter,用于不能缺省的參數(shù)
  throwIfMissing = ()=> {
    throw new Error('缺少參數(shù)');
  }


  _tabItemIcon = (selected=false, paths)=>{
    return (
      <Surface
        width = {26}
        height = {30}
        style = {{margin:-3}}
        >
        <Group scale = {0.9}>
          {
            paths.map( (item, index)=>{
              return (
                <Shape key={index}
                  fill={selected? '#ff5942':'#ccc'}
                  d={item.path}
                  />
              );
            } )
          }
        </Group>
      </Surface>
    );
  }




// 渲染/設(shè)置 tabItem
  _renderTabItem = (title='Tab', tabTag=this.throwIfMissing(), renderIcon=this.throwIfMissing(), renderSelectedIcon, containerView=<View style={[styles.container, {backgroundColor:'green'}]}></View>)=> {
    return (
      <TabNavigator.Item
        title={title}
        selectedTitleStyle={styles.selectedTitleStyle}
        selected={this.state.selectedTab === tabTag}
        onPress={()=>this.setState({selectedTab:tabTag})}
        renderIcon={renderIcon}
        renderSelectedIcon={renderSelectedIcon}
        >
        {containerView}
      </TabNavigator.Item>
    );
  };



  render(){
    return (
      <TabNavigator>
        {this._renderTabItem('推薦', homeTabTag,     ()=>this._tabItemIcon(false, homeSVGPaths),     ()=>this._tabItemIcon(true, homeSVGPaths), )}
        {this._renderTabItem('圖庫', albumTabTag,    ()=>this._tabItemIcon(false, albumSVGPaths),    ()=>this._tabItemIcon(true, albumSVGPaths), )}
        {this._renderTabItem('商家', merchantTabTag, ()=>this._tabItemIcon(false, merchantSVGPaths), ()=>this._tabItemIcon(true, merchantSVGPaths), )}
      </TabNavigator>
    );
  }

};


const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  selectedTitleStyle:{
    color:'#ff5942',
  },
});

最后編輯于：2017.12.03 03:57:34

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市哈肖，隨后出現(xiàn)的幾起案子吻育，更是在濱河造成了極大的恐慌，老刑警劉巖淤井，帶你破解...
沈念sama閱讀 216,544評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件布疼，死亡現(xiàn)場離奇詭異，居然都是意外死亡币狠，警方通過查閱死者的電腦和手機(jī)游两，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,430評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來漩绵，“玉大人贱案，你說我怎么就攤上這事≈雇拢” “怎么了宝踪？”我有些...
開封第一講書人閱讀 162,764評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵侨糟，是天一觀的道長。經(jīng)常有香客問我瘩燥，道長秕重，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,193評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任厉膀，我火速辦了婚禮溶耘，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘站蝠。我一直安慰自己汰具，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,216評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布菱魔。她就那樣靜靜地躺著留荔，像睡著了一般。火紅的嫁衣襯著肌膚如雪澜倦。梳的紋絲不亂的頭發(fā)上聚蝶，一...
開封第一講書人閱讀 51,182評論 1贊 299
城市分裂傳說
那天，我揣著相機(jī)與錄音藻治，去河邊找鬼碘勉。笑死，一個胖子當(dāng)著我的面吹牛桩卵，可吹牛的內(nèi)容都是我干的验靡。我是一名探鬼主播，決...
沈念sama閱讀 40,063評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼雏节，長吁一口氣：“原來是場噩夢啊……” “哼胜嗓！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起钩乍，我...
開封第一講書人閱讀 38,917評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤辞州，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后寥粹，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體变过，經(jīng)...
沈念sama閱讀 45,329評論 1贊 310
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,543評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年涝涤，在試婚紗的時候發(fā)現(xiàn)自己被綠了媚狰。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,722評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡阔拳，死狀恐怖哈雏，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤裳瘪，帶...
沈念sama閱讀 35,425評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布土浸，位于F島的核電站，受9級特大地震影響彭羹，放射性物質(zhì)發(fā)生泄漏黄伊。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,019評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一派殷、第九天我趴在偏房一處隱蔽的房頂上張望还最。院中可真熱鬧，春花似錦毡惜、人聲如沸拓轻。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,671評論 0贊 22
一樁弒父案经伙，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽扶叉。三九已至，卻和暖如春帕膜，著一層夾襖步出監(jiān)牢的瞬間枣氧，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,825評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工垮刹，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留达吞，地道東北人。一個月前我還...
沈念sama閱讀 47,729評論 2贊 368
代替公主和親
正文我出身青樓荒典，卻偏偏與公主長得像酪劫，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子寺董，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,614評論 2贊 353

[JamProject][SVG TabNavigator]待...

Root.js 2016-04-09

Root.js 2016-04-10第一步抽取

Root.js 進(jìn)行第二步,為了方便今后拓展

Root.js 進(jìn)行第三步伙单，簡化代碼

推薦閱讀更多精彩內(nèi)容