(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選項(xiàng) - pickerData ：數(shù)據(jù)源
- selectedValue ：默認(rèn)選擇第幾項(xiàng)
- pickerConfirmBtnText ：確定按鈕
- pickerCancelBtnText ：取消按鈕
- pickerTitleText ：pickerToolBar的標(biāo)題
- pickerToolBarBg ：頂部菜單背景（pickerToolBar背景）
- pickerBg ：選項(xiàng)內(nèi)容的背景
- pickerToolBarFontSize ：頂部菜單文字大小
- pickerFontSize ：選項(xiàng)內(nèi)容文字大小
- onPickerConfirm() ：點(diǎn)擊確定按鈕后執(zhí)行的函數(shù)
- onPickerCancel() ：取消后執(zhí)行的回調(diào)函數(shù)
- onPickerSelect() ： 選擇后執(zhí)行的回掉函數(shù)
示例代碼：
_pickerShow(){
Picker.init({
pickerData: [
{
北京:[
{
朝陽區(qū):['艾歐尼亞','暗影島']
},
{
東城區(qū):['艾歐尼亞2','暗影島2']
}
]
},
{
重慶:[
{
渝北區(qū):['光電園','嘉州']
},
{
江北區(qū):['觀音橋','華新街']
}
]
},
],
selectedValue: ['重慶','渝北區(qū)','嘉州'],
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.itdecent.cn/p/90f8d1f3d638
效果圖
效果圖2
(2) sectionList分組列表組件 （這個(gè)組件踩了很多坑）
(1)常用屬性：
- sections ： 數(shù)據(jù)源，數(shù)據(jù)格式是數(shù)組Array
- renderItem ：每一個(gè)section(分組)中的item(列表)
- renderSectionHeader ：每個(gè)section(分組)中的header(頭部)
- keyExtractor ：為每一個(gè)item生成唯一的key，也可以在所有的對(duì)象數(shù)組中都加上key,就不會(huì)出現(xiàn)黃色的缺少key的警告
- refreshing ：是否處于刷新狀態(tài)（和flatList，listView一樣）
- onRefresh ：下拉刷新 （和flatList，listView一樣）
- onEndReached ：上拉加載（和flatList，listView一樣）
- onEndReachedThreshold ：到底部多大距離觸發(fā)上拉加載（和flatList，listView一樣）
- ItemSeparatorComponent ：每個(gè)item的分割組件，不會(huì)出現(xiàn)在第一行之前和最后一行之后(注意是組件哦，第一個(gè)字母要大寫)
- SectionSeparatorComponent ：每個(gè)分組的分割組件。(注意是組件哦，第一個(gè)字母要大寫)
- ListHeaderComponent ：頭部組件(注意是組件哦，第一個(gè)字母要大寫)
- ListFooterComponent ：尾部組件(注意是組件哦，第一個(gè)字母要大寫)
(2)關(guān)于sectios數(shù)據(jù)源
- 注意，這里坑比較多
- (1) sectons數(shù)組里面，必須是 key和data，不能換成其他的屬性變量，比如：data不能換成value
- (2) 數(shù)據(jù)的格式必須是：
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數(shù)據(jù)：引入是取名是Data，所以sections數(shù)據(jù)源用Data.data取到數(shù)組
{
"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": "生男生女神藥”真的神？不靠譜別上當(dāng)",
"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": "專家建議：預(yù)防藥物性肝病莫亂服藥",
"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歲 高于全國(guó)平均水平",
"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種藥品進(jìn)入醫(yī)保藥品目錄",
"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": "生男生女神藥”真的神？不靠譜別上當(dāng)",
"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": "專家建議：預(yù)防藥物性肝病莫亂服藥",
"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歲 高于全國(guó)平均水平",
"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種藥品進(jìn)入醫(yī)保藥品目錄",
"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.itdecent.cn/p/6302c4d48b97
(清晰)https://segmentfault.com/a/1190000009736867
(詳細(xì))http://blog.csdn.net/qq_38453189/article/details/72810741
(scrollView,listView,flatList,sectionList的區(qū)別)http://www.itdecent.cn/p/6302c4d48b97
http://www.itdecent.cn/p/346474013915
(3)WebView
屬性：
- source ：需要加載網(wǎng)頁的網(wǎng)址
- automaticallyAdjustContentInsets ：是否自動(dòng)調(diào)整內(nèi)容，默認(rèn)是true
<WebView
source={{uri: params.webview }}
automaticallyAdjustContentInsets={true}
/>
(常用屬性)http://www.itdecent.cn/p/bce419c39af3
(詳細(xì))http://blog.csdn.net/sinat_17775997/article/details/60872714
(踩坑)http://www.itdecent.cn/p/f963839fca1a
效果圖：
webview
(ReactNative實(shí)現(xiàn)圖片上傳功能 )http://blog.csdn.net/codetomylaw/article/details/52446786
(React-native使用FormDate上傳圖片異?？偨Y(jié))http://www.itdecent.cn/p/b5c81d7dfbb9
(react-native圖片循環(huán)上傳七牛)http://www.itdecent.cn/p/1b78787c56be
(七牛上傳圖片的了解與使用)http://www.itdecent.cn/p/5d7b5324786d
