Mobx + React Native 獲取路由的狀態信息

李濤發布于2019-08-22 14:54 / 2188人閱讀

摘要：年前公司由一個項目是使用來開發的所以遇到了一些問題比較影響開發進程的就是路由問題了實際上就是這個組件比較難懂這里給大家講解一下希望大家少踩點坑另外本篇文章使用的是環境主要講解的還是如何使用記錄中路由的狀態但是會穿插一些小內容這里雖然講到的是

年前公司由一個項目是使用 ReactNative 來開發的所以遇到了一些問題,比較影響開發進程的就是路由問題了,實際上就是 ReactNavigation 這個組件比較難懂,這里給大家講解一下,希望大家少踩點坑.另外本篇文章使用的是 TypeScript環境

主要講解的還是 如何使用Mobx記錄ReactNative中路由的狀態 但是會穿插一些小內容,這里雖然講到的是 Mobx , 如果你使用的是 redux 的話也不用灰心,原理都是一樣的,只要能看懂這篇文章,那我相信對于 ReactNavigation 有了更深的了解

ReactNavigation的官網上面有redux的教程

API介紹

在開發之前我先向大家介紹一下需要使用到的API

NavigationActions

getStateForAction

addNavigationHelpers

NavigationActions里面存在了很多方法,在這里我先講 NavigationActions.init(), 實際上是用來獲取 初始狀態 的路由信息,當然你也可以不使用這個API,來自己手動寫出初始的路由狀態,但是我不太推薦這個方法,第一個是路由擴展的時候你又要去重新改,第二個是ReactNavigation這個庫的改動很頻繁,說不定哪一天就變了個格式,到時候你又要重寫

getStateForAction(action, state) 提供一個 action 和 上一次的路由狀態 從而獲取最新的路由狀態

addNavigationHelpers(navigation) 是記錄路由狀態的核心方法,如何理解呢？我們看到他的參數是 navigation 這是一個對象,我們這里只講其中的兩個值 state 和 dispatch,這里的 dispatch 和 redux的dispatch 的概念是相似的,在 ReactNavigation 里面每次路由的改變,他都會在里面觸發 dispatch 并且傳遞一個 action,有了action之后可以通過getStateForAction來獲取當前路由的state.state則是保證當前建立的路由信息和Mobx保存的路由信息的一致性

實現代碼

import * as React from "react";
import * as stores from "@stores";

import Router from "./router";// 自己定義的路由結構

import { Provider } from "mobx-react/native";
import { addNavigationHelpers } from "react-navigation";

import { observer } from "mobx-react";
import { useStrict } from "mobx";

useStrict(true);
console.disableYellowBox = true;

interface Props {}

interface State {}

@observer
export default class App extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    let { nav } = stores;
    return (
      
        
      
    );
  }
}

// store
import { observable, action, computed } from "mobx";
import { NavigationActions, NavigationState } from "react-navigation";

import RootRouter from "@router/index"; // 自己定義的路由結構

export class NavStore {
  @observable.ref navigatorState: NavigationState;

  constructor() {
    this.navigatorState = RootRouter.router.getStateForAction(
      NavigationActions.init(),
      null
    );
  }

  // 提供一個獲取當前路由層級的功能
  private getRouterName(state) {
    let childRouters = state.routes;
    if (childRouters && childRouters.length > 0) {
      let curRouterName = childRouters[state.index].routeName;
      let nextRouterName = this.getRouterName(childRouters[state.index]);
      let result = nextRouterName ? "-" + nextRouterName : "";
      return curRouterName + result;
    }
    return "";
  }

  @computed
  get routerName() {
    return this.getRouterName(this.navigatorState);
  }

  @action
  dispatch(action) {
    const previousNavState =  this.navigatorState;
    return (this.navigatorState = RootRouter.router.getStateForAction(
      action,
      previousNavState
    ));
  }
}

export default new NavStore();

大家對 Mobx 不熟悉的話其實看我前面API的介紹就好了,核心就是addNavigationHelpers 提供了覆蓋 dispatch 和 同步state 的功能,只要理解了這個,無論你使用 redux 還是 Mobx 都不是問題

另外一些小問題

在開發 ReactNative 的時候可能在某個頁面需要跳轉,這個時候你不得不把 navigation 從頭傳到底,這種體驗很糟糕我更推薦使用一些 API 去 快速跳轉 或者 傳遞參數

  import { NavigationActions } from "react-navigation";

  // 使用我上面定義的dispatch 
  
  // 簡單跳轉  
  dispatch(
    NavigationActions.navigate({ routeName: "Search" })
  );
 
  // 帶參數跳轉  
  dispatch(
    NavigationActions.navigate({ 
        routeName: "Search" , 
        params : { name : "Jason "} 
    })
  )
  
  // 多級跳轉
  dispatch(
    NavigationActions.navigate({ 
        routeName: "Search",
        action : NavigationActions.navigate({ routeName: "User" })
    })
  );

這篇文章是年前的 ReactNavigation 文檔,剛剛上去又看了一下發現有些改動,我研究下有沒有需要改動的地方,不過大致看了下,應該沒啥變化

參考資料:

React Navigation 官方文檔

React Navigation with MobX (Paul Xue)【內含Github地址】

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92981.html

前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
React 328道最全面試題(持續更新)

摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發給大家，同時發布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

kumfo 2019-08-26 10:13 評論0 收藏0
React Native 搭配 MobX 使用心得

摘要：通過可以讓識別列表長度變化自動更新列表，利用維護項數據可以使每個項保持響應式卻互不影響，對長列表優化效果很明顯。最好的方式是將數據統一放在中，子組件通過方式獲取數據。 MobX 是一款十分優秀的狀態管理庫，不但書寫簡潔還非常高效。當然這是我在使用之后才體會到的，當初試水上車的主要原因是響應式，考慮到可能會更符合 Vue 過來的思考方式。然而其實兩者除了響應式以外并沒有什么相似之處。在...

MSchumi 2019-08-21 17:37 評論0 收藏0
Flutter+Mobx實戰，寫一個App應用

摘要：在這里可以處理一些傳過來的參數，然后我們將參數放入類中實例化。因為雖然是一個，但是實例化的時候是兩個不同的，所以第一個頁面的數據變化了也不會影響到這里。說明目前增加了路由跳轉，可以帶參數跳轉頁面。下拉可以自定義刷新樣式，IOS點擊Status Bar回到頂部，目前已經測試過。狀態管理器使用Mobx,我自己覺得對于Redux使用起來會復雜一點，下面是提供的預覽GIF圖,卡頓現象是因為屏幕錄制...

wyk1184 2019-05-23 17:28 評論0 收藏0
Redux 的問題：React、MobX 和 Realm 能解決嗎？

摘要：它是由一個非常聰明的人開發的，用來緩解在單頁面應用中管理狀態的問題。的問題沒有一種適合所有場景的完美工具。為設計的是世界的另一個新增內容，但目前僅適用于。這將導致最后期限延長，并且留下更多需要我們維護的代碼。原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不討厭 ...

snifes 2019-08-21 16:41 評論0 收藏0