React Native中组件的封装使用

React Native中组件的封装使用

　　　不知不觉，入坑RN也有一个月了，本来就是从安卓原生转过来，刚入手是一脸懵逼的，到现在项目也写了几个功能界面， 算是一只脚迈进了RN的大门，学习新知识，总结很重要，古人说得好：温故而知新，是非常有科学道理的，所以时不时应该挤出点时间来做做笔记总结。这篇主要总结下组件复用。

一、 组件的封装复用

　　　RN的精髓就是组件的复用，随着写的界面增多，你会爱上这种操作，就像再搭建一座城堡，一块块砖组件而成，load一下，城堡就屹立在你眼前。下面举个项目中封装的比较简单的demo。
　　　
- 轮播图Swiper的封装
　　　我们的项目中，好几个页面都用到了轮播图，而且每个轮播图轮播的图片也是不一样的，这时候就应该考虑写个壳子，需要使用到这个轮播图的页面，把这个壳子拿来自己填充东西（轮播图片）进去，实现灵活的定制。轮播图的实现是采用了目前在RN上比较主流的Swiper，github上star4K多，算是比较稳定，之前有尝试过另一个控件viewpager，出现了一些奇怪的bug而弃之。下面看看我封装后的demo：Banner.js

render(){        let swiper = null;        if (this.state.visibleSwiper) {  //这里设置了visible是因为与页面底部导航有冲突，可忽略            swiper = <Swiper showButton={false}                             autoplay={true}                             height={this.props.height}   //高度可定制                             removeClippedSubviews={false}                             dot={<View style={styles.customDot} />}                             activeDot={<View style={styles.customActiveDot} />}                             paginationStyle={{                                 bottom: 10                             }}            >            //bannerData就是一组轮播图片，数组中每个图片的地址就是item，map映射到每个Image中                {this.props.bannerData.map(item => {                    return (                        <View style={{flex:1}}>                            <TouchableHighlight  >                                <Image source={{uri:item}} style={{width:360,height:this.props.height}}></Image> 　　　　　　　                            </TouchableHighlight>                        </View>                    )                })}            </Swiper>;                } else {                swiper = <View></View>;            }        return(            <View style={{flexDirection:'row'}}>            {swiper}            </View>        )    };

在使用的页面中导入我们封装好了的这个轮播图,如下：

import Banner from '../../components/Banner' //sliderImgs就是轮播图数组[url1,url2,....]，赋值给bannerData <Banner height={180} bannerData={sliderImgs} />

• 小结
  　　组件的复用，其实就是子组件与父组件通信，被使用的一方就是子组件，被人拿去定制成为别人特有的组件，这时候子组件只要暴露出那些可以定制的属性，通过this.props.xxx，然后父组件就得根据子组件定义的属性来给出具体的属性值 xxx=“” 稍微写一点就得快一小时，时间真是不经花呢