react-native中Picker動(dòng)態(tài)設(shè)置數(shù)據(jù)源

本文純?cè)瓌?chuàng)汁政,純手打带膜,請(qǐng)大神多多指教瘫怜。轉(zhuǎn)載請(qǐng)注明出處滨彻!
react-native版本:0.48; 開(kāi)發(fā)環(huán)境win10+VScode; 最后更新時(shí)間:2017.09.15;

關(guān)于Picker官方給出的代碼是這樣的

<Picker
  selectedValue={this.state.language}
  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

這個(gè)數(shù)據(jù)源是寫死的藕届,并沒(méi)有給出動(dòng)態(tài)數(shù)據(jù)源的例子,實(shí)際操作中大部分?jǐn)?shù)據(jù)源是動(dòng)態(tài)的亭饵,下面給出我寫的動(dòng)態(tài)寫法

效果圖,有些地方?jīng)]錄下來(lái)休偶,實(shí)際情況請(qǐng)自行執(zhí)行代碼


這里寫圖片描述

代碼

"use strict"

import React, { Component } from 'react'
import {
    AppRegistry,
    View,
    Text,
    Picker,
    StyleSheet
} from 'react-native'

// 網(wǎng)絡(luò)獲取的數(shù)據(jù),內(nèi)容必須是簡(jiǎn)單數(shù)據(jù)冬骚,不可是對(duì)象


export default class Test extends Component {

    constructor(props) {
        super(props)
        this.state = {
            pickerValue: '暫無(wú)數(shù)據(jù)',
            data:[]
        }
    }

    //本人項(xiàng)目需要椅贱,這句代碼可忽略
    static navigationOptions = {
        header: null
    }
    //模擬聯(lián)網(wǎng)
    componentWillMount(){
        this.setState({
            data : [
                'name1',
                'name2',
                'name3',
                'name4',
                'name5',
            ]
        })
    }
    
    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.text}>{this.state.pickerValue}</Text>

                <Picker style={styles.picker}
                    selectedValue={this.state.pickerValue}
                    mode={'dropdown'}  //'dialog'彈窗 'dropdown'下拉
                    onValueChange={(value) => {
                        this.setState({ pickerValue: value, })
                        if (value == 'name5') {
                           alert('處理數(shù)據(jù)') 
                        }
                    }}>
                    <Picker.Item label={'請(qǐng)選擇'} value={'請(qǐng)選擇'} />
                    {this.state.data.map((name) => <Picker.Item label={name} value={name} />)}

                </Picker>

            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        alignItems: 'center',
    },
    text: {
        marginTop: 30,
        backgroundColor: 'red',
        width: 200,
        fontSize: 20,
    },
    picker: {
        marginTop: 30,
        backgroundColor: 'cyan',//給Picker設(shè)置背景顏色后懂算,下拉箭頭將會(huì)消失
        width: 200,
    },
})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末只冻,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子计技,更是在濱河造成了極大的恐慌喜德,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,406評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件垮媒,死亡現(xiàn)場(chǎng)離奇詭異舍悯,居然都是意外死亡航棱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門萌衬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)饮醇,“玉大人,你說(shuō)我怎么就攤上這事秕豫∑蛹瑁” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 167,815評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵混移,是天一觀的道長(zhǎng)祠墅。 經(jīng)常有香客問(wèn)我,道長(zhǎng)歌径,這世上最難降的妖魔是什么毁嗦? 我笑而不...
    開(kāi)封第一講書人閱讀 59,537評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮回铛,結(jié)果婚禮上狗准,老公的妹妹穿的比我還像新娘。我一直安慰自己茵肃,他們只是感情好驶俊,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著免姿,像睡著了一般饼酿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上胚膊,一...
    開(kāi)封第一講書人閱讀 52,184評(píng)論 1 308
  • 那天故俐,我揣著相機(jī)與錄音,去河邊找鬼紊婉。 笑死药版,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的喻犁。 我是一名探鬼主播槽片,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼肢础!你這毒婦竟也來(lái)了还栓?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,668評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤传轰,失蹤者是張志新(化名)和其女友劉穎剩盒,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體慨蛙,經(jīng)...
    沈念sama閱讀 46,212評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡辽聊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評(píng)論 3 340
  • 正文 我和宋清朗相戀三年纪挎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片跟匆。...
    茶點(diǎn)故事閱讀 40,438評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡异袄,死狀恐怖伯襟,靈堂內(nèi)的尸體忽然破棺而出嗤详,到底是詐尸還是另有隱情澄暮,我是刑警寧澤娃属,帶...
    沈念sama閱讀 36,128評(píng)論 5 349
  • 正文 年R本政府宣布略号,位于F島的核電站骗炉,受9級(jí)特大地震影響基括,放射性物質(zhì)發(fā)生泄漏学赛。R本人自食惡果不足惜叁巨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評(píng)論 3 333
  • 文/蒙蒙 一斑匪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧锋勺,春花似錦蚀瘸、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,279評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至苏章,卻和暖如春寂嘉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背枫绅。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,395評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工泉孩, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人并淋。 一個(gè)月前我還...
    沈念sama閱讀 48,827評(píng)論 3 376
  • 正文 我出身青樓寓搬,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親县耽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子句喷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評(píng)論 2 359

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