React Native 自定义组件及属性

1). 安装prop-types
npm install --save prop-types
2). 导入
import PropTypes from 'prop-types';
3). 定义属性
    const ImageSourcePropType = require('ImageSourcePropType');

    // 在组件中填写
    /**
     * 属性参数
     属性名称: React.PropTypes.array,
     属性名称: React.PropTypes.bool,
     属性名称: React.PropTypes.func,
     属性名称: React.PropTypes.number,
     属性名称: React.PropTypes.object,
     属性名称: React.PropTypes.string,
     */
    static propTypes = {
        focused: PropTypes.bool.isRequired,
        selectedImage: ImageSourcePropType,
        normalImage: ImageSourcePropType
    };
4). 完整代码
import React, {PureComponent} from 'react';
import {
    Image
} from 'react-native';
// npm install --save prop-types
import PropTypes from 'prop-types';

const ImageSourcePropType = require('ImageSourcePropType');

/**
 * @FileName: TabBarItem
 * @Author: mazaiting
 * @Date: 2018/6/12
 * @Description:
 */
class TabBarItem extends PureComponent {
    /**
     * 属性参数
     属性名称: React.PropTypes.array,
     属性名称: React.PropTypes.bool,
     属性名称: React.PropTypes.func,
     属性名称: React.PropTypes.number,
     属性名称: React.PropTypes.object,
     属性名称: React.PropTypes.string,
     */
    static propTypes = {
        focused: PropTypes.bool.isRequired,
        selectedImage: ImageSourcePropType,
        normalImage: ImageSourcePropType
    };
    
    render() {
        const image = this.props.focused ? this.props.selectedImage : this.props.normalImage;
        return (
            <Image source={image} style={{tintColor: this.props.tintColor, width: 22, height: 22}}/>
        )
    }
}

/**
 * 导出当前Module
 */
module.exports = TabBarItem;
上一篇:DHTMLX Tree JSON添加自定义属性方法


下一篇:Vue移动端弹窗组件|Nuxt模态框|Vue仿天猫底部弹出框