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=“” 稍微写一点就得快一小时，时间真是不经花呢