本文内容
通过代码来描述封装的思想(本人理解的封装)
封装嘛
1、能不给你看的,坚决不给你看
2、必须要给你看的,让你看的详细
简单的就封装下如图的组件,介绍下封装需要做的事情
一、封装组件里面的属性声明
名字嘛,通俗易懂,让人一看就知道是什么意思
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="时间"
/>
外部传了值,就会根据外部传的值进行显示
外部没有传值,就会使用默认的值进行显示