React Native 自定义组件及属性

1). 安装prop-types

npm install --save prop-types

        

          
        
        
        

          

          AI 代码解读
        
      
      

2). 导入

import PropTypes from 'prop-types';

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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;

        

          
        
        
        

          

          AI 代码解读