React Native开发之常用第三方控件
来源:互联网 发布:华罗庚的优化法时间 编辑:程序博客网 时间:2024/06/04 19:55
前言
React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于View层的开发,因此在很多深层次上还需要结合原生app做一定的兼容,还有就是现在好多控件,如Android中已是系统的控件的sidemenu、checkbox、gridview等,这些在React native中 系统是没有给我们提供的,这时候就借助了第三方开源的力量。
那么我们今天说说在React Native项目开发中常见的一些第三方库。
常见的第三方库
组件篇
CheckBox(多选按钮)
react-native-check-box CheckBox
基本用法:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
当然我们也可以自定义样式,主要是对选中和未选中的样式做修改:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
RadioButton(单选按钮)
react-native-flexi-radio-button
使用也很简单,就是在中嵌套下就行:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
sidemenu (侧滑栏)
react-native-side-menu
使用:
- 1
- 2
- 3
- 1
- 2
- 3
splashscreen
react-native-splash-screen
使用也很简单,就是添加一个闪屏的xml
imagepicker
这个组件帮助我们选取图片和调用相机等,这个组件同时支持photo和video,也就是照片和视频都可以用这个组件实现。
用法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
然后在页面展示的时候:
- 1
- 1
说到这里,我们要说一下另一个控件picker
picker-Android
Picker就是ReactNative界的Spinner,其常用的属性有:
- onValueChange 这个方法在方法在选择Picker某一项时调用 可传两个参数 选择的value和position
- selectedValue 这个属性是选择的值
- enabled 设置是否可点击 Android属性
- mode 设置样式 Android属性 dropdown下拉样式和dialog弹窗样式 默认是dialog
- prompt 设置Picker标题 Android属性 并且只有是mode为dialog才会显示
- itemStyle 设置每一项的样式 iOS属性
用法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
easy-toast
react-native-easy-toast
这个组件兼容了Android和iOS的toast,使用也很简单。
用法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
最后在需要调用的地方:
- 1
- 1
其他的一些库
选项卡
各种漂亮的小组件
按钮
输入框表单验证
https://github.com/gcanti/tcomb-form-native
https://github.com/FaridSafi/react-native-gifted-form
https://github.com/bartonhammond/snowflake
炫酷效果的 TextInput
https://github.com/halilb/react-native-textinput-effects
https://github.com/zbtang/React-Native-TextInputLayout
聊天表情
地图
动画
加载动画
日历
可多选的Listview
附:http://www.jianshu.com/p/e7b8bb13c9b8
- React Native开发之常用第三方控件
- React Native开发之常用第三方控件
- React-Native开发中常用的第三方控件持续更新
- React-Native常用第三方库
- React Native常用第三方组件
- React native 常用第三方件总结
- react native 常用的第三方工具包
- React Native常用第三方组件汇总
- RN-第三方之-react-native-fs
- React Native 项目常用第三方组件 很常用
- 【React Native 安卓开发】----第三方框架的引用之React-native-Swiper框架实现欢迎页【第五篇】
- React Native常用第三方组件汇总--史上最全
- React Native 项目常用第三方组件汇总
- React Native 项目常用第三方组件汇总
- React Native 项目常用第三方组件汇总
- React Native 项目常用第三方组件
- React Native 项目常用第三方组件汇总
- React Native 项目常用第三方组件汇总
- Apache与Tomcat 区别联系
- USACO——修理牛棚
- LeetCode 1. Two Sum java solution with HashMap
- react native实现上拉加载下拉刷新
- 寒假篇37
- React Native开发之常用第三方控件
- RAD模型
- 串口返回红外键值
- 机器学习在工程中使用要点
- [Leetcode] #61 Rotate List
- 请教大神,在Java中GSON解析 JSON 怎么解析
- POJ 1321 棋盘问题
- 高精度——数楼梯
- 寒假篇38