React Native icon的使用

2019/2/6 posted in  web

项目已经集成react-native-vector-icons , 这里将不在这里整理怎么在本地安装了。

具体使用方式

具体的icon图标样式可以在这里找

代码如下:

//直接在页面显示图标
//注意这里要引入ICON,同时还要是可以支持的icon

import Icon from 'react-native-vector-icons/Ionicons';

<Icon name="md-aperture" color={subTitleColor} size={px2dp(16)}/>

// 这个是写首页的icon button样式
render(){
        return(
            <TabNavigator
                hidesTabTouch={true}
                tabBarStyle={[styles.tabBarStyle, {backgroundColor: this.props.rowItemBackgroundColor}]}
                sceneStyle={{
                    paddingTop: theme.toolbar.paddingTop, //immersive experience
                    paddingBottom: styles.tabBarStyle.height}}>
                {this._renderItem(RegisterFragment, 'register', '注册', this.state.registerNormal, this.state.registerSelected)}
            </TabNavigator>
        );
    }

componentWillMount(){
        const tabIconColor = this.props.tabIconColor;
        if(Platform.OS === 'ios') {
            Icon.getImageSource('ios-add-circle-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({registerNormal: source}));
            Icon.getImageSource('ios-add-circle-outline', 100, tabIconColor).then((source) => this.setState({registerSelected: source}));
        }else if(Platform.OS === 'android'){
            Icon.getImageSource('md-add-circle-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({registerNormal: source}));
            Icon.getImageSource('md-add-circle-outline', 100, tabIconColor).then((source) => this.setState({registerSelected: source}));
        }
    }