react-narive-picker+ sectionList高性能的分组列表组件+webview
2017-08-04 09:15
555 查看
(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
(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
效果图:
webview
(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 Native-12.React Native WebView组件详解
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- ReactNative中SectionList组件
- react-native-swipe-list-view侧滑删除组件使用
- ReactNative WebView组件通信
- 【React Native开发】 - WebView组件的使用
- react-native 侧滑组件 react-native-swipe-list-view
- ReactNative WebView组件详解
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- React Native系列——WebView组件使用介绍
- ReactNative WebView组件通信
- 解决 react native 的 webview 组件不支持android客户端上传图片文件问题
- ReactNative-WebView组件
- ReactNative-WebView组件
- ReactNative WebView组件详解
- (八)React Native---WebView组件
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
- react-native-swipe-list-view侧滑删除组件使用