From 399b1d55cdb27bb490b6dcff18e5ebb1eb75b024 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Sat, 30 May 2015 00:22:29 +0200 Subject: [PATCH] Fully working TabBarIOS support. --- lib/create-icon-set.js | 54 +++++++++++++++++++++++++++++++++++++----- 1 file changed, 48 insertions(+), 6 deletions(-) diff --git a/lib/create-icon-set.js b/lib/create-icon-set.js index 7989a92..d8cd354 100644 --- a/lib/create-icon-set.js +++ b/lib/create-icon-set.js @@ -9,6 +9,7 @@ var { View, Text, StyleSheet, + TabBarIOS, } = React; var NativeModules = require('NativeModules'); var RNVectorIconsManager = NativeModules.RNVectorIconsManager; @@ -18,6 +19,8 @@ var flattenStyle = require('flattenStyle'); var ViewStylePropTypes = require('ViewStylePropTypes'); var TextStylePropTypes = require('TextStylePropTypes'); +var DEFAULT_ICON_SIZE = 12; +var TAB_BAR_ICON_SIZE = 30; function createIconSet(glyphMap, fontFamily) { var styles = StyleSheet.create({ @@ -58,7 +61,7 @@ function createIconSet(glyphMap, fontFamily) { Object.keys(TextStylePropTypes) ); - var size = this.props.size || textStyle.fontSize || 12; + var size = this.props.size || textStyle.fontSize || DEFAULT_ICON_SIZE; textStyle.fontSize = size; textStyle.lineHeight = size; textStyle.height = size; @@ -75,27 +78,66 @@ function createIconSet(glyphMap, fontFamily) { ); } }); - Icon.getImageSource = function(name, size, callback) { + + var imageSourceCache = {}; + + var getImageSource = function(name, size, callback) { invariant(RNVectorIconsManager, 'RNVectorIconsManager not available, did you add the library to your project and link with libRNVectorIcons.a?'); var glyph = glyphMap[name] || '?'; if(typeof glyph === 'number') { glyph = String.fromCharCode(glyph); } + size = size || DEFAULT_ICON_SIZE; + + var cacheKey = glyph + ':' + size; return new Promise((resolve, reject) => { - RNVectorIconsManager.getImageForFont(fontFamily, glyph, size || 12, function(err, image) { - callback && callback(err, image); + if(imageSourceCache[cacheKey]) { + return resolve({ uri: imageSourceCache[cacheKey] }); + } + RNVectorIconsManager.getImageForFont(fontFamily, glyph, size, function(err, image) { + var result; + if(!err && image) { + imageSourceCache[cacheKey] = image; + result = { uri: image }; + } + callback && callback(err, result); if (err) { reject(err); } else { - resolve(image); + resolve(result); } }); }); - }; + + var TabBarItem = React.createClass({ + getInitialState: function() { + return { + icon: false, + selectedIcon: false, + }; + }, + + componentDidMount: function() { + var size = this.props.iconSize || TAB_BAR_ICON_SIZE; + if(this.props.iconName) { + getImageSource(this.props.iconName, size).then((image) => this.setState({ icon: image })); + } + if(this.props.selectedIconName) { + getImageSource(this.props.selectedIconName, size).then((image) => this.setState({ selectedIcon: image })); + } + }, + + render: function() { + return ; + } + }); + + Icon.TabBarItem = TabBarItem; + return Icon; };