React Native 学习四 第三方组件
来源:互联网 发布:知乎网友 蒙歌 编辑:程序博客网 时间:2024/05/19 23:57
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
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目录
- React Native 学习四 第三方组件
- React-Native学习--轮播图第三方组件-react-native-swiper
- React-Native学习--轮播图第三方组件-react-native-swiper
- React-native 第三方组件
- React Native学习-控制横竖屏第三方组件:react-native-orientation
- React Native学习-控制横竖屏第三方组件:react-native-orientation
- react native第三方组件问题
- 更改React Native第三方组件源码
- React Native第三方组件优化精简
- React Native常用第三方组件
- React native 第三方组件汇总
- React Native常用第三方组件汇总
- react native组件学习(四)
- react native学习笔记9——引入第三方组件和react-navigation的使用
- React Native常用第三方组件汇总--史上最全
- React Native 项目常用第三方组件汇总
- React-Native-image-picker-调取摄像头第三方组件:
- React Native 项目常用第三方组件汇总
- 30天自制操作系统-第2天心得笔记
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat使用详解
- CMAKE 默认头文件路径问题
- 1032. 挖掘机技术哪家强(20)
- (二)用Spark Python进行数据处理和特征提取
- React Native 学习四 第三方组件
- LeetCode 91. Decode Ways
- Spring入门(接口、IOC、注入)
- JAVA学习之break与continue的区别
- webstorm恢复误删除的项目
- QTreeWidget使用小结
- struts2 使用动态调用时出现的问题
- 利用 Java dump 进行 JVM 故障诊断
- @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8") @DateTimeFormat(pattern="yyyy-MM-dd")