React Native --傳值

今天主要記錄一下react native的幾種傳值方式;

1.navigator傳值

在此就不記錄react-navigation的具體使用方法了,可以參見官網(wǎng)中的使用實(shí)例.下面代碼記錄從home頁(yè)面跳轉(zhuǎn)到second頁(yè)面并傳遞參數(shù)的過程;

home頁(yè)面代碼
render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.props.navigation.navigate('second',{datasource: "我是第一個(gè)頁(yè)面?zhèn)鱽淼臄?shù)據(jù)"})}}>
                    <Text style={{fontSize:16,color:'white'}}>跳轉(zhuǎn)到下一頁(yè)面</Text>
                </TouchableOpacity>

            </View>
        );
    }

上面代碼中onPress={() => {this.props.navigation.navigate('second',{datasource: "我是第一個(gè)頁(yè)面?zhèn)鱽淼臄?shù)據(jù)"})}}就是聲明的一個(gè)跳轉(zhuǎn)的點(diǎn)擊方法,navigator后面跟的第一個(gè)參數(shù)second,代表跳轉(zhuǎn)的頁(yè)面;{datasource: "我是第一個(gè)頁(yè)面?zhèn)鱽淼臄?shù)據(jù)"}代表要傳遞過去的參數(shù),名稱可以是任意,只要保證在另外一個(gè)頁(yè)面取值時(shí)相同即可.當(dāng)然也可以傳遞一個(gè)json字符串,在另外一個(gè)頁(yè)面通過點(diǎn)語(yǔ)法獲取想要的值即可.
接下來看一下在另外一個(gè)頁(yè)面的使用情況

render() {
        //1.不同頁(yè)面之間使用navigator進(jìn)行正向傳值  
//此處為析構(gòu)的過程,當(dāng)然也可以在在下面直接使用this.props.navigation.state.datasource來獲取,只不過使用這種方式會(huì)更加清晰明了
        const { params } = this.props.navigation.state;
        return (
            <View style={styles.container}>
                <Text>{params.datasource}</Text>
            </View>
        );
    }

2.props傳值(一般使用在父子關(guān)系的組件中)

首先來寫一個(gè)子組件(注意次處的子組件和父組件是是在一個(gè)js文件中,若在兩個(gè)js文件中記得使用export default關(guān)鍵字修飾)

class OneView extends Component {
  
    render(){
        return(
            <View>
                <Text>{this.props.textnum}</Text>
            </View>
        );
    }
}

父組件中使用時(shí)只要傳一個(gè)textnum,子組件就可以通過他的props來獲取

<OneView  textnum="str"/>

3.ref傳值(一般使用在兄弟組件或者在父組件中對(duì)子組件局部刷新)

把上面寫的OneView的組件做如下修改

class OneView extends Component {
    constructor(props) {
        super(props);
        this.state = {
           //聲明一個(gè)refNum變量并設(shè)初始值為0
            refNum : 0,
        }
        //this._oneFunction = this._oneFunction.bind(this);
    }
    //在此寫一個(gè)方法,在外面通過ref的方式來調(diào)用,更新當(dāng)前的refNum字段
    _oneFunction = (number) => {
        this.setState({refNum:number})
    }
    render(){
        return(
            <View>
               {/*在此驗(yàn)證上面的方法是否執(zhí)行*/}
                <Text>{this.state.refNum}</Text>
                <Text>{this.props.textnum}</Text>
            </View>
        );
    }
}

在外面使用時(shí)

export default class second extends Component {

    render() {
        return (
            <View style={styles.container}>
               {/*點(diǎn)擊方法中通過refs.'設(shè)置的ref值'并通過點(diǎn)語(yǔ)法調(diào)用組件中的方法*/}
                <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.refs.OneView._oneFunction(7)}}>
                    <Text style={{fontSize:16,color:'white'}}>我是home的二級(jí)頁(yè)面</Text>
                </TouchableOpacity>
                {/*設(shè)置組件的ref值,其實(shí)就是相當(dāng)于設(shè)置一個(gè)索引,在其他的地方可以通過此值來當(dāng)?shù)喇?dāng)前的組件*/}
                <OneView ref="OneView" textnum="str"/>
            </View>
        );
    }
}

demo地址https://github.com/fttyumicha/react-native-passvalue

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市押蚤,隨后出現(xiàn)的幾起案子励饵,更是在濱河造成了極大的恐慌蚕苇,老刑警劉巖梦裂,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咖为,死亡現(xiàn)場(chǎng)離奇詭異嗅义,居然都是意外死亡柬唯,警方通過查閱死者的電腦和手機(jī)靠柑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門寨辩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人歼冰,你說我怎么就攤上這事靡狞。” “怎么了隔嫡?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵甸怕,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我腮恩,道長(zhǎng)梢杭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任秸滴,我火速辦了婚禮武契,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘荡含。我一直安慰自己咒唆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布释液。 她就那樣靜靜地躺著全释,像睡著了一般。 火紅的嫁衣襯著肌膚如雪误债。 梳的紋絲不亂的頭發(fā)上恨溜,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天符衔,我揣著相機(jī)與錄音找前,去河邊找鬼糟袁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛躺盛,可吹牛的內(nèi)容都是我干的项戴。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼槽惫,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼周叮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起界斜,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤仿耽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后各薇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體项贺,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年峭判,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了开缎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡林螃,死狀恐怖奕删,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情疗认,我是刑警寧澤完残,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站横漏,受9級(jí)特大地震影響谨设,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绊茧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一铝宵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧华畏,春花似錦鹏秋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至仑乌,卻和暖如春百拓,著一層夾襖步出監(jiān)牢的瞬間琴锭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工衙传, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留决帖,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓蓖捶,卻偏偏與公主長(zhǎng)得像地回,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子俊鱼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

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

  • React Native頁(yè)面跳轉(zhuǎn)、傳值帝火、回傳 Navigator --- 在React Native中的不同頁(yè)面我...
    Nickyzhang閱讀 1,834評(píng)論 0 5
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,332評(píng)論 25 707
  • 行走在街上的雨夜溜徙, 細(xì)雨霏霏彌漫了整個(gè)街道, 溫暖的燈火處购公,是誰的笑語(yǔ)萌京? 驅(qū)走了那一絲寒意。 下班了奔波在路上的行...
    布丁奶茶_閱讀 365評(píng)論 0 1
  • 對(duì)于跑者來說宏浩,跑步是一項(xiàng)開始了就沒法停下來的運(yùn)動(dòng)知残。奔跑這種狀態(tài)已經(jīng)成為生活中必不可少的部分,從花開的時(shí)候到雪落的季...
    夜郎西閱讀 1,135評(píng)論 0 1
  • 第一比庄,用幾句話清楚說明你發(fā)現(xiàn)目前市場(chǎng)中存在一個(gè)什么空白點(diǎn)求妹,或者存在一個(gè)什么問題,以及這個(gè)問題有多嚴(yán)重佳窑,幾句話就夠了...
    龍權(quán)閱讀 945評(píng)論 0 1