RN知识

RN-封装

2017-08-28  本文已影响20人  精神病患者link常

本文内容
通过代码来描述封装的思想(本人理解的封装)

封装嘛

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="时间"
                />

外部传了值,就会根据外部传的值进行显示
外部没有传值,就会使用默认的值进行显示

A55CFE97-86EF-4C42-BF05-08B28F3E97CF.png
上一篇 下一篇

猜你喜欢

热点阅读