React Native學習之路(11) - 兩種方式實現城市三級聯動 + （react-narive-picker）+ （sectionList高性能的分組列表組件）+ （webview）

(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.lxweimin.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.lxweimin.com/p/6302c4d48b97
(清晰)https://segmentfault.com/a/1190000009736867
(詳細)http://blog.csdn.net/qq_38453189/article/details/72810741
(scrollView,listView,flatList,sectionList的區別)http://www.lxweimin.com/p/6302c4d48b97
http://www.lxweimin.com/p/346474013915

(3)WebView

屬性：
  • source ：需要加載網頁的網址
  • automaticallyAdjustContentInsets ：是否自動調整內容，默認是true
 <WebView
           source={{uri: params.webview }}
           automaticallyAdjustContentInsets={true}
                    
     />

(常用屬性)http://www.lxweimin.com/p/bce419c39af3
(詳細)http://blog.csdn.net/sinat_17775997/article/details/60872714
(踩坑)http://www.lxweimin.com/p/f963839fca1a
效果圖：

webview

(ReactNative實現圖片上傳功能 )http://blog.csdn.net/codetomylaw/article/details/52446786
(React-native使用FormDate上傳圖片異常總結)http://www.lxweimin.com/p/b5c81d7dfbb9
(react-native圖片循環上傳七牛)http://www.lxweimin.com/p/1b78787c56be
(七牛上傳圖片的了解與使用)http://www.lxweimin.com/p/5d7b5324786d

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容