1. 程式人生 > >react-navigation 返回重新整理

react-navigation 返回重新整理

在react native寫頁面的時候,this.props.navigation.goBack(),返回上一個頁面的時候,不會重新整理頁面

例如:一個使用者頁面A,在未登入的情況下,跳到登入頁面B,登入之後返回使用者頁面A,這時候需要重新整理使用者頁面。

(如果是A跳到B然後再跳到A,這種是可以重新整理頁面,但是在此時點選返回鍵會回到B,再點返回會返回到A,這有可能不是你想要的)

使用者User頁面

        const { navigate } = this.props.navigation;
        navigate('Login', {
          page: 'User',
          callBack: () => {
            //在此調介面或者改變state會讓頁面改變
          }
        });

登入Login頁面

const { goBack,state } = this.props.navigation;
// 在登入頁面,在goBack之前,將上個頁面的方法取到,並回傳引數,這樣回傳的引數會重走render方法
state.params.callback('回撥引數');
goBack();



//import { NavigationActions } from 'react-navigation';
//NavigationActions.back(state.params.callBack('回撥引數'))

以上。。。

相關推薦

react-navigation 返回重新整理

在react native寫頁面的時候,this.props.navigation.goBack(),返回上一個頁面的時候,不會重新整理頁面 例如:一個使用者頁面A,在未登入的情況下,跳到登入頁面B,登入之後返回使用者頁面A,這時候需要重新整理使用者頁面。 (如果是A跳到

react navigation返回到任意頁面(不整合redux)

react navigation預設是使用key作為goback的引數進行返回的,這個key是一個動態生成的,而不是我們定義的routeName。 網上也有很多方法有的說更改原始碼,有的說是整合redux。更改原始碼的方式我也嘗試過但是如果開啟滑動返回屬性,很

react-navigation 使用的整體框架 安卓物理返回

一、"react-navigation": "^1.0.0-beta.22" 低版本的使用 建立兩個資料夾專門來寫導航的頁面 1、TabNavigator 專門來寫Tab欄上的頁面(tab欄上的每個頁面的導航都可以在元件中設定,新版本的導航會統一寫一個頁面) impor

關於react-navigation的TabNavigator(舊版)createBottomTabNavigator(新版)重新整理問題

有人說用DeviceEventEmitter解決: 我怎麼感覺不靠譜呢!!! 有人問過同樣的問題: 問題解決: 解決: componentDidMount() {          this.subs = [this.props.navigatio

react navigation中使用goBack返回指定頁面

goBack goBack的引數為頁面的key, 這個key是系統隨機分配的, 而不是手動設定的routeName, 所以引數填routeName無法跳轉, goBack如果不帶引數(即key為undefined)會返回上一個頁面, 這個引數key不是目標

react-navigation android 導航標題居中

mmu github tile reac oid comm and roi image 先貼下代碼供參考: 安卓默認導航的titile 是在左側的,為了和iOS保持一致,需要添加 alignSelf:‘center‘,這個 屬性 但是會遇到title有點偏右的情況 添

react navigation傳值給上一頁面

reac 組件 .get value cto oba info state getpara 使用新的導航組件react navigation,傳值方式略微發生了一些改變 A頁面到B頁面 pushaddremark(){ let _this=this;

react-navigation

ret enable ons mil 滑動切換 定義 使用 one animation TabNavigator的使用   定義一個整體的tab屬性 import {TabNavigator,StackNavigator,TabBarBottom} from ‘re

React Navigation-(Qucik Start)快速開始

const 例如 json 抽屜 開始 新的 ans tail pos 快速開始 要開始使用React Navigation,您只需安裝 react-navigation npm包 npm install --save react-navigation yarn add

react-native導航器 react navigation 介紹

開發環境搭建 部署 ica sam native 找不到 組件 getting start 開發環境搭建好之後,想要進一步了解react-native,可以先從react-native官網上的電影列表案例入手: https://reactnative.cn/docs/0

react-navigation 簡介

tor 方式 一個 justify 深度 哪些 區別 view avi StackNavigator: 原理和瀏覽器相似但又有局限,瀏覽器的方式是開放性的,通過點擊一個鏈接可以跳轉到任何頁面(push),點擊瀏覽器後退按鈕,返回到前一個頁面(pop)。StackNavig

react-navigation 導航、路由

outer dsta one erp 頁面設置 png stack raw params 1,首先,下載,安裝,引入react-navigation  npm install --save react-navigation  或者 yarn add rea

react-navigation設置navigationOptions中Static中使用 this 的方法

IT 需要 target style ati ams screen AR 操作 使用react-navigation時,單頁面設置navigationOptions中,進行Static中 調用this 中的方法或值時,需要做如下操作 static naviga

react-navigation學習筆記(一)

法則 gate avi 學習 之前 navi 路由 存在 是否 1.關於this.props.navigation.navigate()與this.props.navigation.push()的區別 navigate方法在跳轉時會在已有的路由棧中查找是否已經存在該值,若存

React-Native開發十 react-navigation開發中的一些常見的坑

1 前言 都說RN開發效率高,一次學習隨處編寫。真的用RN開發了一個APP才知道,RN中坑真是太多,特別是很多坑只有在生產模式下才會出現,在平常的debug模式下,APP執行好好的,但是你一旦打正式包,就會發現各種報錯,各種崩潰,如果在Android平臺下,各種相容性,各種奇葩的問題

React-Native開發九 react-navigation之Android的打包與釋出

1前言 RN的開發中正式釋出前需要打包與簽名,然後才能上架各家應用市場。打包需要將js與圖片資原始檔打包進apk檔案中,生成index.android.bundle與index.android.bundle.meta檔案。下面介紹RN開發中打包APK的主要步驟,IOS沒研究過,不再本

React-Native開發八 react-navigation之自定義元件Counter

1 前言 我們知道RN中任何介面元素都可以看成元件,小到一個按鈕,大到一個頁面。RN開發就是不停的開發元件和使用元件,並讓他們協同工作,這樣高效率協同的執行起來,這樣就能完成一個APP的功能了 在實際的開發中,我們經常需要自定義一些滿足我們專案開發的自定義元件,類似於Android

React-Native開發七 react-navigation之AsyncStorage資料儲存

1 前言 我們都知道,在Android和IOS中分別有不同的持久化資料方式,例如Android中的檔案,資料庫,SharePrefences等。AsyncStorage是一個簡單的key-value儲存系統,是RN官方推薦的。它儲存的都是String型別的資料,是一個RN中輕量級的資

React-Native開發六 react-navigation之StackNavigator簡介

1 前言 react-navigation是RN開發中一款開源的導航元件,它的功能包括StackNavigator,TabNavigator,DrawerNavigator。react-navigation的出現替代了Navigator、 Ex-Navigation等老一代的導航元件

Redux + React Navigation react-navigation-redux-helpers

https://davidleee.com/2018/09/10/upgrade-react-navigation-redux-helpers-to-v2/ https://blog.csdn.net/j_bleach/article/details/80714844 2018最新版:htt