React Native学习之路(11) - 两种方式实现城市三

作者: woow_wu7 | 来源:发表于2017-08-03 15:11 被阅读360次

(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

网友评论

啸雨:哥们，你用的reactNative 是高于0.44的吧？sectionList 的 SectionSeparatorComponent 会在header下边和item 之间也有间隔，我想去掉一个section中header 和item 之间的间隔咋办？
0.44.3没有这个问题~ 求解谢谢
woow_wu7: @啸雨你好好检查下，不可能不行，肯定是父元素的样式覆盖了
啸雨:@省局到谢谢您的回复不过这个方法不行
woow_wu7:应该可以直接在render的return中直接给view添加style的，可以用margin等控制的。
SectionSeparatorComponent和ItemSeparatorComponent也应该能控制的。
壹点微尘:学习了你的11篇文章,受益匪浅,感谢感谢
woow_wu7: @壹点微尘一起学习，一起进步😃

React Native学习之路(11) - 两种方式实现城市三

(1) react-native-picker第三方组件

(2) sectionList分组列表组件（这个组件踩了很多坑）

(1)常用属性：

(2)关于sectios数据源

(3) 使用例子

(3)WebView

属性：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

react native

React Native开发经验集

React Native实践

RN

React Native学习之路(11) - 两种方式实现城市三

(1) react-native-picker第三方组件

(2) sectionList分组列表组件 （这个组件踩了很多坑）

(1)常用属性：

(2)关于sectios数据源

(3) 使用例子

(3)WebView

属性：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

react native

React Native开发经验集

React Native实践

RN

(2) sectionList分组列表组件（这个组件踩了很多坑）