[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',
    };
  }




  // 进行渲染页面内容
  _renderContent(title: ?string) {
    return (
      // 千万别忘了 flex:1, 否则无界面显示
      <NavigatorIOS
        style={{flex:1}}
        initialRoute={{
          translucent: false,
          component:Home,
          title:title,
        }}
        />

    );
  }


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



  _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路径(注意:仅适用于当前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'];
  • 类内部修改添加函数
  _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 进行第二步,为了方便今后拓展

  • homePaths数组的组成元素，有字符串改成字典类型数据
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'}];
  • 相应的修改_tabItemIcon函数
  _tabItemIcon = (selected=false, paths)=>{
    return (
      paths.map( (item, index)=>{
        return (
          <Shape key={index}
            fill={selected? '#ff5942':'#ccc'}
            d={item.path}
            />
        );
      } )
    );
  }

Root.js 进行第三步，简化代码

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,用于不能缺省的参数
  throwIfMissing = ()=> {
    throw new Error('缺少参数');
  }


  _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>
    );
  }




// 渲染/设置 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',
  },
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345

推荐阅读更多精彩内容

  • MySQL入门
    作为一个数据库小白，在面试过程中无数次被问到有没有数据库经验，十分尴尬。于是准备从MySQL开始入门一下，只求学会...
    C就要毕业了阅读 817评论 0赞 6
  • 《我的1988》 梦想的城
    - Alex. 滕 我将爱锁在逆光的影子里 等待潮起之时的船铃 将之分发...
    AlexPFTeng阅读 161评论 0赞 1