React Native 学习四 第三方组件

React Native 提供了大量的原生组件，但是为了近一步提升开发质量和效率，也可以使用第三方组件。

通过以下两个网站可以找到大量的第三方组件：

    1.https://github.com

    2.https://js.coach/react-native

第三方库资源汇总

   http://www.jianshu.com/p/53ff78168acc

一、react-native-swiper的使用

       这个组件主要对于轮播的使用，地址：https://github.com/leecade/react-native-swiper

       将react-native-swiper 拷贝到项目中

       安装命令：npm install react-native-swiper

       打开项目，导入包 import Swiper from 'react-native-swiper';

       将ScrollView进行更改

      

运行项目 运行不到不到10秒奔溃，因为使用swiper组件后不再需要定时器，这时候删除 _startTimer()的相关代码和componentDidMount 下的this._startTimer();

及

       <View style={[styles.indicator,{left:left}]}>
            {this.state.advertisements.map((advertisement,index)=>{
              return(
                     <View key = {index}
                                 style = {(index === this.state.currentPage)
                                   ?styles.circleSelected
                                   :styles.circle
                                 }/>
                    );
             })}
         </View>

 因为swiper中已经实现了此功能

 

二、NativeBase的使用

      NativeBase(https://nativebase.io/)是一个优秀的React Native组件库，组件可进行跨平台开发，省去了不同平台的适配负担！

      详见：https://github.com/GeekyAnts/NativeBase

      1.将下载native-base 拷贝到项目目录

        执行安装：npm install native-base

        安装成功后 在package.json增加一条关于NativeBase到记录"native-base": "^2.3.2",

      2.由于NativeBase依赖于native-base-vector-icons,所以还需要使用命令进行安装

         npm install react-native-vector-icons

         增加以来react-native-vector-icons 到原生工程

         react-native link react-native-vector-icons

下面就可以使用NativeBase到相应组件了（如果重新运行项目出现错误，关闭ReactNative服务 删除node_modules文件夹）接着使用npm install命令重新安装所以的依赖库，重新运行即可解决）

nativebase组件的使用 0.4之后的版本照以前版本有很大的改变 参考官方文档去做，才可以正确运行https://docs.nativebase.io/Components.html#footer-tabs-badge-headref，

这里的样式标记更加简洁如：top,left,right,bottom

代码片段：https://github.com/kangxg/React-Native-.git 中newSuccessReact目录