封装嘛

1、能不给你看的，坚决不给你看
2、必须要给你看的，让你看的详细

25DD96B2-CE45-4CC7-9A20-4A7E272CCCA1.png

简单的就封装下如图的组件，介绍下封装需要做的事情

一、封装组件里面的属性声明

名字嘛，通俗易懂，让人一看就知道是什么意思

import React, { Component, PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';


import customImg from './2.jpeg';

export default class RNProjectTestApp extends Component {

    /*声明属性*/
    static propTypes = {
        /**
         * 图片
         */
        showCustomImg: PropTypes.object,
        /**
         * 标题
         */
        title: PropTypes.string,
        /**
         * 描述
         */
        describe: PropTypes.string,
        /**
         * 时间
         */
        time: PropTypes.string,
    };
}

在这里声明的属性，有些是自己内部用的，有些是外部需要使用的，
在这里声明的属性，给定属性的类型，防止传参错误

二、给声明的属性（外部使用）指定默认的值

 /*属性默认值*/
    static defaultProps = {
        showCustomImg: customImg,
        title: '默认显示的标题',
        describe: '默认显示的描述',
        time: '默认显示的时间',
    };

当外部没有传这些值的话，内部会使用默认的值进行渲染

三、外部使用方法

                <MyCell />
                <MyCell showCustomImg={CellImg}
                        title="标题"
                        describe="描述"
                        time="时间"
                />
                <MyCell showCustomImg={CellImg}
                        time="时间"
                />
                <MyCell
                        title="标题"
                        time="时间"
                />