ReactNative自定義元件及屬性

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;