react-native 實現頁面之間的相互傳值


用到 react Navigation 組件

兼容性: IOS/Android
原理: react Navigation 為頁面的 props 上掛載了 navigation 對象, 可用來做路由跳轉,在做頁面跳轉時可以攜帶參數/回調方法前往目標頁面, 從而達到傳參的目的。

切換路由方法:

    this.props.navigation.goBack() 返回上一層
    this.props.navigation.popToTop() 返回堆棧最頂層
    this.props.navigation.push(‘Details’) 繼續往下推送新的路由,相當於子頁面的子頁面
    this.props.navigation.navigate(‘Details’) 將新路由推送到導航器中,如果沒有在導航器中,則跳轉到該頁面

父頁面A:

import {Component} from "react"; import { Text,AlertStatic as Alert, TouchableOpacity, View, DeviceEventEmitter } from "react-native"; import {createStackNavigator} from "react-navigation"; import B from '../B.js'; calss A extends Component { render(){ return( <View> <TouchableOpacity onpress={ ()=>{ this.props.navigation.navigate('B') } }> <Text>點擊跳轉</Text> </TouchableOpacity> </View> ) } } const HomeScreen = createStackNavigator({ Home: {screen: A}, Details: {screen: B}, }); module.exports = A; 

子頁面B:

import {Component} from "react"; import { Text, TouchableOpacity, View, DeviceEventEmitter } from "react-native"; class B extends Component { render(){ return( <View> <TouchableOpacity onpress={ ()=>{ this.props.navigation.goBack(); } }> <Text>點擊返回</Text> </TouchableOpacity> </View> ) } } module.exports = B; 

接下來是帶參數傳遞方法:

父頁面傳參數給子頁面

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.navigate('B',{ params:xx, }) } }> 

子頁面接收參數

constructor(props){ super(props); const {navigation} = this.props; let yy = navigation.getParam("params"); } 

這樣子頁面就獲取到父頁面傳遞過來的值了。

豌豆資源搜索網站https://55wd.com 廣州vi設計公司http://www.maiqicn.com

子頁面帶參數返回父頁面方法(兩種方式):

方法一:
子頁面傳遞參數

<TouchableOpacity onpress={ ()=>{ this.props.navigation.state.params.callBack(params); this.props.navigation.goBack(); } }> <Text>點擊返回</Text> </TouchableOpacity> 

父頁面接收參數

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.navigate('B',{ params:xx, callBack:(params) =>{ Alert(params); } }) } }> 

方法二:

添加一個監聽器DeviceEventEmitter

子頁面

TouchableOpacity onpress={
    ()=>{
        DeviceEventEmitter.emit('returnData',params); this.props.navigation.goBack(); } }> <Text>點擊返回</Text> 

父頁面

componentDidMount() {
     DeviceEventEmitter.addListener("returnData", (params) => { Alert(params); }) }

ok,完成!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM