react-narive-picker+ sectionList高性能的分组列表组件+webview
来源:互联网 发布:安卓模拟器 知乎 编辑:程序博客网 时间:2024/06/11 00:24
(1) react-native-picker第三方组件
- (1)安装
npm install react-native-picker --save
- (2) link
react-native link react-native-picker
- (3) 引入
import Picker from 'react-native-picker'
- (4) 使用
(一) Picker.init选项 - pickerData :数据源
- selectedValue :默认选择第几项
- pickerConfirmBtnText :确定按钮
- pickerCancelBtnText :取消按钮
- pickerTitleText :pickerToolBar的标题
- pickerToolBarBg :顶部菜单背景(pickerToolBar背景)
- pickerBg :选项内容的背景
- pickerToolBarFontSize :顶部菜单文字大小
- pickerFontSize :选项内容文字大小
- onPickerConfirm() :点击确定按钮后执行的函数
- onPickerCancel() :取消后执行的回调函数
- onPickerSelect() : 选择后执行的回掉函数
示例代码:
_pickerShow(){ Picker.init({ pickerData: [ { 北京:[ { 朝阳区:['艾欧尼亚','暗影岛'] }, { 东城区:['艾欧尼亚2','暗影岛2'] } ] }, { 重庆:[ { 渝北区:['光电园','嘉州'] }, { 江北区:['观音桥','华新街'] } ] }, ], selectedValue: ['重庆','渝北区','嘉州'], pickerConfirmBtnText:'确定', pickerCancelBtnText:'取消', pickerTitleText:'选择城市', pickerToolBarBg: [232, 232, 232, 1], pickerBg:[245,245,245,1], pickerToolBarFontSize: 16, pickerFontSize: 20, onPickerConfirm: (data) => { // console.log(data) var pp = JSON.stringify(data) AsyncStorage.setItem('cityContent',pp) AsyncStorage.getItem('cityContent').then( (data) => { var mm = JSON.parse(data) this.setState({ cityContent: mm }) }) } }); Picker.show(); }---------------------------------------------------- <TouchableNativeFeedback onPress={ this._pickerShow.bind(this) } > <View style={ styles.cityContainer}> <Text style={ styles.cityText}>选择城市:</Text> <Text style={styles.cityText_showtext}> {this.state.cityContent} </Text> </View> </TouchableNativeFeedback>
(github地址)https://github.com/beefe/react-native-picker/blob/master/README.md
http://www.jianshu.com/p/90f8d1f3d638
(2) sectionList分组列表组件 (这个组件踩了很多坑)
(1)常用属性:
- sections : 数据源,数据格式是数组Array
- renderItem :每一个section(分组)中的item(列表)
- renderSectionHeader :每个section(分组)中的header(头部)
- keyExtractor :为每一个item生成唯一的key,也可以在所有的对象数组中都加上key,就不会出现黄色的缺少key的警告
- refreshing :是否处于刷新状态(和flatList,listView一样)
- onRefresh :下拉刷新 (和flatList,listView一样)
- onEndReached :上拉加载(和flatList,listView一样)
- onEndReachedThreshold :到底部多大距离触发上拉加载(和flatList,listView一样)
- ItemSeparatorComponent :每个item的分割组件,不会出现在第一行之前和最后一行之后(注意是组件哦,第一个字母要大写)
- SectionSeparatorComponent :每个分组的分割组件。(注意是组件哦,第一个字母要大写)
- ListHeaderComponent :头部组件(注意是组件哦,第一个字母要大写)
- ListFooterComponent :尾部组件(注意是组件哦,第一个字母要大写)
(2)关于sectios数据源
- 注意,这里坑比较多
- (1) sectons数组里面,必须是 key和data,不能换成其他的属性变量,比如:data不能换成value
- (2) 数据的格式必须是:
const array = [ { key:'xxx',data:[ {title:'xxx',content:'xxx'} ,{title:'xxx',content:'xxx'}] } , { key:'xxx',data:[ {title:'xxx',content:'xxx'} ,{title:'xxx',content:'xxx'}] } , .... ]
(3) 使用例子
render() { return ( <View style={styles.container}> <SectionList sections={ Data.data } renderItem= { this._renderItem } renderSectionHeader = { this._renderSectionHeader} keyExtractor={(item,index)=>("index"+index+item)} SectionSeparatorComponent={()=><View style={{height:20,backgroundColor:'blue'}}></View>} ItemSeparatorComponent={ () => <View style={{height:3,backgroundColor:'#ffb02e'}}></View>} /> </View> ); }----------------------------------------------------- _renderItem(item){ console.log(item) return( <View> <Text style={{ color: 'blue' }}>{ item.item.title }</Text> <Text style={{ color: 'green' }}>{ item.item.content }</Text> </View> ) } _renderSectionHeader(header) { return ( <Text style={{ color: 'red' }}> { header.section.key} </Text> ) }----------------------------------------mock的JSON数据:引入是取名是Data,所以sections数据源用Data.data取到数组{ "data":[ { "key":"居家易肝病", "data":[ { "title": "53种病停止输注抗菌药 乱输液有七大危害", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/32e39ba9aed74dfa845708493f897ba320170801140018.png_150x100x1x85.jpg" }, { "title": "生男生女神药”真的神?不靠谱别上当", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-07-31 12:10", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/44f4e117250d49e8aa9f0150e7b503a820170731121632.png_150x100x1x85.jpg" }, { "title": "专家建议:预防药物性肝病莫乱服药", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/a46d0f817efe42e8aa93b28fd747e58220170728100007.png_150x100x1x85.jpg" }, { "title": "北京人期望寿命82.03岁 高于全国平均水平", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/32e39ba9aed74dfa845708493f897ba320170801140018.png_150x100x1x85.jpg" }, { "title": "人社部解读36种药品进入医保药品目录", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/32e39ba9aed74dfa845708493f897ba320170801140018.png_150x100x1x85.jpg" } ] }, { "key":"居家易肺病", "data":[ { "title": "53种病停止输注抗菌药 乱输液有七大危害", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/32e39ba9aed74dfa845708493f897ba320170801140018.png_150x100x1x85.jpg" }, { "title": "生男生女神药”真的神?不靠谱别上当", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-07-31 12:10", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/44f4e117250d49e8aa9f0150e7b503a820170731121632.png_150x100x1x85.jpg" }, { "title": "专家建议:预防药物性肝病莫乱服药", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/a46d0f817efe42e8aa93b28fd747e58220170728100007.png_150x100x1x85.jpg" }, { "title": "北京人期望寿命82.03岁 高于全国平均水平", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/32e39ba9aed74dfa845708493f897ba320170801140018.png_150x100x1x85.jpg" }, { "title": "人社部解读36种药品进入医保药品目录", "content":"http://jiankang.163.com/17/0801/14/CQOQGE2N0038804U.html", "date":"2017-08-01 14:00", "image":"http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/32e39ba9aed74dfa845708493f897ba320170801140018.png_150x100x1x85.jpg" } ] } ]}
效果图:
http://blog.csdn.net/mengks1987/article/details/70236823
http://www.jianshu.com/p/6302c4d48b97
(清晰)https://segmentfault.com/a/1190000009736867
(详细)http://blog.csdn.net/qq_38453189/article/details/72810741
(scrollView,listView,flatList,sectionList的区别)http://www.jianshu.com/p/6302c4d48b97
http://www.jianshu.com/p/346474013915
(3)WebView
属性:
- source :需要加载网页的网址
- automaticallyAdjustContentInsets :是否自动调整内容,默认是true
<WebView source={{uri: params.webview }} automaticallyAdjustContentInsets={true} />
(常用属性)http://www.jianshu.com/p/bce419c39af3
(详细)http://blog.csdn.net/sinat_17775997/article/details/60872714
(踩坑)http://www.jianshu.com/p/f963839fca1a
效果图:
(ReactNative实现图片上传功能 )http://blog.csdn.net/codetomylaw/article/details/52446786
(React-native使用FormDate上传图片异常总结)http://www.jianshu.com/p/b5c81d7dfbb9
(react-native图片循环上传七牛)http://www.jianshu.com/p/1b78787c56be
(七牛上传图片的了解与使用)http://www.jianshu.com/p/5d7b5324786d
作者:省局到
链接:http://www.jianshu.com/p/ea94c8c1ee44
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- react-narive-picker+ sectionList高性能的分组列表组件+webview
- React Native使用SectionList打造城市选择列表,包含分组的跳转
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
- react-native的下拉列表Picker
- ReactNative的分组ListView-----SectionList
- react-native SectionList的使用
- react-naitve picker组件封装
- 基础篇章:关于 React Native 之 Picker 组件的讲解
- react-WeUI之picker组件的相关属性
- ReactNative分组列表SectionList使用详情及示例详解
- ReactNative分组列表SectionList使用详情及示例详解
- 《React-Native系列》41、刨根问底Picker组件
- 《React-Native系列》40、刨根问底Picker组件
- React Native之Picker组件详解
- React-Native SectionList使用
- 史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
- react native测量组件的宽高
- react native SectionList 使用详解
- Hive 5、Hive 的数据类型 和 DDL Data Definition Language) Hive DML(Data Manipulation Language)
- 接口和抽象类有什么区别
- CentOS安装FastDFS以及nginx下载代理
- 数据结构和算法:AVL自平衡二叉树
- 白话经典算法系列之十一 一道有趣的GOOGLE面试题 【解法2】
- react-narive-picker+ sectionList高性能的分组列表组件+webview
- HDU-2612--Find a way---BFS广搜
- 自动化测试 -- 通过Cookie跳过登录验证码
- Hive 12、Hive优化
- 使用find_in_set()函数的注意事项
- html将td与th对齐
- 【bzoj3641】货车运输
- POJ1163 The Triangle
- zabbix自定义报警媒介的脚本无法执行