react native使用react-navigation跳轉後多頁面資料傳遞總結_react-native

前言

最近在將背景一個管理系統修改成手機app，使用react-native，後端使用的是thinkphp 3.2.3．原本採用的傳統的thinkphp模板標籤渲染頁面，加上js來實現的一套管理系統，現在需要全部手機app，原先跟我說是給我練手的，但是我怎麼感覺自己被忽悠了。。。

回到正題，由於是第一次寫這種組件化的東西，加之設計師到昨天才給我完整的設計稿，所以前前後後，加上國慶放假，幾乎寫了快一個月了． 最大的感觸是寫這玩意第一需要踩坑，被一個問題卡半天，一天的是正常的，別覺得自己效率低，你會發現怕出坑後你看到了更高的風景． 第二就是多寫，這真的是我切身的感受，在你寫的過程中需要去考慮這個複雜的內容可以不可以整合成一個組件，從而在其他頁面中使用，這個函數需不需要封裝成一個函數，還有樣式，總之就是一定要有全域觀，不要覺得再複雜的代碼複製粘帖到另一個頁面中也能用，千萬不要有這種思想，到時候修改的時候，那酸爽，簡直不敢相信． 所以這個時候就是第三點，設計師的稿子。。。在我開始寫的時候設計師在忙別的項目，所以稿子一直沒有，那時候我就只好先把原先使用thinkphp的模板方式渲染資料改為Ajax擷取資料，本來一些頁面的功能我都完成了，可是當設計師把稿子給我的時候我徹底傻眼了，原本我打算在一個頁面內完成的內容，被他分成了多個頁面，而且多個頁面間還需要傳值，加上一些很炫的動畫效果．基本等於前面我寫的部分除了從後台擷取資料沒有變之外，別的全部白寫了，我的心好累．一皿一，講真，那時候真的想掐設計師．．．．．．

下面就是我算是遇到的問題中比較複雜的一個，當然，說明白之後也簡單的． 情況分析

資料結構： 訂單，有訂單資訊(頁面１) 商品，每筆訂單下有多件商品(頁面２)

所以當建立頁面１後，需要多次調用頁面２來添加該筆訂單中的商品資訊，而且還需要頁面３來編輯建立的好的頁面２的資料． 頁面１

頁面２

設計稿的頁面３中有一些真實的資料，所以沒有放出來，內容跟頁面２一致的，只是填充了資料

在頁面１填寫一些資訊後需要跳轉到頁面２，在頁面２中繼續完善一些資訊，之後返回頁面１．這個時候其實頁面２有兩種選擇方式，１是使用Modal類比頁面，但是我總是關不掉那個Modal框，所以我只好把頁面２單獨寫成一個檔案，之後使用navigate進行跳轉，但是這個時候就是噩夢的開始了．看下面的跳轉順序：

這個時候其實頁面１是最麻煩的，因為頁面１需要接收來自３個頁面的資料，１是入口檔案，２是新增商品後的跳轉，３是編輯商品後的跳轉．而且這裡還沒有考慮之後的編輯頁面１建立的內容，而且那時候我很傻的沒有提前確定好資料結構，只是將資料傳遞通過navigate進行傳遞，而且沒有對資料進行總結，導致當需要添加一個參數的時候就需要修改多個native的函數，並且還要擔心新加的參數會不會影響原始的功能，簡單來說就是構建了一個複雜的參數傳遞．看例子１

const {navigate}=this.props.navigation;navigate("RouteName",{param1:value,param2:value,param3:value})

當每個頁面都使用這樣的方式傳遞資料的時候，並散落在多個頁面的時候，當其中一個頁面需要添加一個參數時，比如頁面１要增加一個傳遞給頁面２的參數，那麼頁面２肯定就需要傳遞迴頁面１，否則頁面１中的那個參數就會消失，當頁面２新增時，那麼編輯時，即頁面３就肯定也需要，這時候等於增加一個參數，每個跳轉函數都需要添加該參數，這樣就真的很麻煩了． 解決方案

所以第二次寫類似頁面的時候就給自己的傳值定了一個規則：只傳state，所有資料都儲存在state中．

在頁面２和頁面３中只使用this.setState操作他們需要的參數．

這樣比起原來的傳多個值，當需要在頁面中加入新值時，僅需要在公用函數getInitState中進行添加，之後在各個頁面間就不需要進行額外的修改了，比起原來簡直放心了許多．