react-native組件優(yōu)化(第三方組件import {Label,Select} from 'teaset'的使用)

在開發(fā)過程中,某些功能需要重復(fù)使用,利用React中的props來傳遞參數(shù)杨刨,通過參數(shù)來控制子組件的屬性。

使用此頁面先下載第三方組件非常好用

npm install --save teaset

https://github.com/rilyu/teaset

import {Label,Select} from 'teaset';按需引入標(biāo)簽來使用

B58AB9BA-028C-4900-8C4B-BAD75FFE542B.png

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
Image,
Button,
ScrollView,
TouchableOpacity,
} from 'react-native';
import {Label,Select} from 'teaset';

//獲取屏幕尺寸
var width = require("Dimensions").get('window').width;
var height = require("Dimensions").get('window').height;

export default class Info extends Component {
static navigationOptions = ({navigation}) => {
var {navigate} = navigation;
return {
headerTitle: "個(gè)人信息",
headerRight: (
<Text style={{
fontSize: 16,
color: "#fff",
marginRight: 10
}} onPress={() => navigate("search")}></Text>
),
headerStyle: {
backgroundColor: "#ff6600",
},
headerTitleStyle: {
alignSelf: "center"
},
headerTintColor: '#fff'
}
};
constructor(props) {
super(props);
this.state = {
};
}
ageItems=[
{
text:'2000',
value:'1',
},
{
text:'2001',
value:'2',
}
];
customItems = [
{
text: '男',
value: 1,
},
{
text: '女',
value: 2,
}
];
cityItems = [
{
text: '深圳',
value: 1,
},
{
text: '北京',
value: 2,
},
{
text: '上海',
value: 3,
},
{
text: '廣州',
value: 4,
},
{
text: '成都',
value: 5,
},
{
text: '重慶',
value: 6,
},
{
text: '武漢',
value: 7,
},
{
text: '杭州',
value: 8,
}
];
render() {
const {navigate,goBack} = this.props.navigation;
return (
<View style={styles.container}>
<ScrollView>
<InfoItem title={'出生年月'}
onSelected={(item, index) => this.setState({ageItemsValue: item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.ageItemsValue}
items={this.ageItems}
prompt={'選擇出生年月'}
/>
<InfoItem title={'性別'}
onSelected={(item, index) => this.setState({customItemsValue: item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.customItemsValue}
items={this.customItems}
prompt={'選擇性別'}/>
<InfoItem title={'城市'}
onSelected={(item, index) => this.setState({cityItemsValue: item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.cityItemsValue}
items={this.cityItems}
prompt={'選擇城市'}/>
<TouchableOpacity
onPress={() => {
goBack()
}}
style={styles.pcTextView}>
<Text style={styles.pcText}>保存</Text>
</TouchableOpacity>
</ScrollView>
</View>
)

}
}

class InfoItem extends Component {
render() {
return (
<View style={styles.bigView}>
<View style={styles.lineView}>
<Text>
{this.props.title}
</Text>
<Select
style={{width: 200, backgroundColor: '#fff', borderColor: '#999'}}
value={this.props.value}
valueStyle={{flex: 1, color: '#000', textAlign: 'right'}}
items={this.props.items}
getItemValue={this.props.getItemValue}
getItemText={this.props.getItemText}
iconTintColor='#000'//上下劍頭的顏色
placeholder={this.props.prompt}//框內(nèi)提示文字
pickerTitle={this.props.title}//彈出框標(biāo)題
onSelected={this.props.onSelected}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F0F0F0'
},
bigView:{
backgroundColor:"#fff",
borderColor:"#999",
borderStyle:"solid",
borderBottomWidth:1,
},
lineView:{
width:width0.9,
marginLeft:width
0.05,
height:50,
flexDirection:"row",
alignItems:"center",
justifyContent:"space-between",
},
pcTextView:{
backgroundColor:"#ff6600",
width:width,
height:50,
borderRadius:25,
alignItems:"center",
justifyContent:"center",
marginTop:20,
},
pcText:{
color:"#fff",
fontSize:16,
}
});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末擦剑,一起剝皮案震驚了整個(gè)濱河市妖胀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌惠勒,老刑警劉巖赚抡,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異纠屋,居然都是意外死亡涂臣,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門售担,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赁遗,“玉大人,你說我怎么就攤上這事族铆⊙宜模” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵哥攘,是天一觀的道長(zhǎng)剖煌。 經(jīng)常有香客問我材鹦,道長(zhǎng),這世上最難降的妖魔是什么耕姊? 我笑而不...
    開封第一講書人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任侠姑,我火速辦了婚禮,結(jié)果婚禮上箩做,老公的妹妹穿的比我還像新娘莽红。我一直安慰自己,他們只是感情好邦邦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開白布安吁。 她就那樣靜靜地躺著,像睡著了一般燃辖。 火紅的嫁衣襯著肌膚如雪鬼店。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,190評(píng)論 1 299
  • 那天黔龟,我揣著相機(jī)與錄音妇智,去河邊找鬼。 笑死氏身,一個(gè)胖子當(dāng)著我的面吹牛巍棱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蛋欣,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼航徙,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了陷虎?” 一聲冷哼從身側(cè)響起到踏,我...
    開封第一講書人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尚猿,沒想到半個(gè)月后窝稿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡凿掂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年伴榔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缠劝。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡潮梯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出惨恭,到底是詐尸還是另有隱情秉馏,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布脱羡,位于F島的核電站萝究,受9級(jí)特大地震影響免都,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜帆竹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一绕娘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧栽连,春花似錦险领、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至熔恢,卻和暖如春脐湾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背叙淌。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工秤掌, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鹰霍。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓闻鉴,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親衅谷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子椒拗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 前言 本文有配套視頻,可以酌情觀看获黔。 文中內(nèi)容因各人理解不同,可能會(huì)有所偏差在验,歡迎朋友們聯(lián)系我玷氏。 文中所有內(nèi)容僅供...
    珍此良辰閱讀 1,505評(píng)論 13 7
  • 前言 本文有配套視頻,可以酌情觀看腋舌。 文中內(nèi)容因各人理解不同盏触,可能會(huì)有所偏差,歡迎朋友們聯(lián)系我块饺。 文中所有內(nèi)容僅供...
    珍此良辰閱讀 1,151評(píng)論 0 6
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)赞辩,沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 7,286評(píng)論 33 15
  • 尊敬的各位領(lǐng)導(dǎo): 校園防溺水形勢(shì)越來越嚴(yán)峻,學(xué)校作為教育主體授艰,我們深感責(zé)任重大辨嗽。下面我就陵陽鎮(zhèn)中心校防溺水工作向各...
    甲午之印閱讀 184評(píng)論 0 0
  • 班級(jí)情況: 校區(qū):科學(xué)創(chuàng)想樂高機(jī)器人和平校區(qū) 時(shí)間:周三5:30-6:30 學(xué)員:王楚涵,尹瀚辰淮腾,喻子宸 任教老師...
    Happy00閱讀 213評(píng)論 0 0