Mobx + React Native 獲取路由的狀態(tài)信息

李濤發(fā)布于2019-08-22 14:54 / 2222人閱讀

摘要：年前公司由一個(gè)項(xiàng)目是使用來(lái)開(kāi)發(fā)的所以遇到了一些問(wèn)題比較影響開(kāi)發(fā)進(jìn)程的就是路由問(wèn)題了實(shí)際上就是這個(gè)組件比較難懂這里給大家講解一下希望大家少踩點(diǎn)坑另外本篇文章使用的是環(huán)境主要講解的還是如何使用記錄中路由的狀態(tài)但是會(huì)穿插一些小內(nèi)容這里雖然講到的是

年前公司由一個(gè)項(xiàng)目是使用 ReactNative 來(lái)開(kāi)發(fā)的所以遇到了一些問(wèn)題,比較影響開(kāi)發(fā)進(jìn)程的就是路由問(wèn)題了,實(shí)際上就是 ReactNavigation 這個(gè)組件比較難懂,這里給大家講解一下,希望大家少踩點(diǎn)坑.另外本篇文章使用的是 TypeScript環(huán)境

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

ReactNavigation的官網(wǎng)上面有redux的教程

API介紹

在開(kāi)發(fā)之前我先向大家介紹一下需要使用到的API

NavigationActions

getStateForAction

addNavigationHelpers

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

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

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

實(shí)現(xiàn)代碼

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

import Router from "./router";// 自己定義的路由結(jié)構(gòu)

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"; // 自己定義的路由結(jié)構(gòu)

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

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

  // 提供一個(gè)獲取當(dāng)前路由層級(jí)的功能
  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();

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

另外一些小問(wèn)題

在開(kāi)發(fā) ReactNative 的時(shí)候可能在某個(gè)頁(yè)面需要跳轉(zhuǎn),這個(gè)時(shí)候你不得不把 navigation 從頭傳到底,這種體驗(yàn)很糟糕我更推薦使用一些 API 去 快速跳轉(zhuǎn) 或者 傳遞參數(shù)

  import { NavigationActions } from "react-navigation";

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

這篇文章是年前的 ReactNavigation 文檔,剛剛上去又看了一下發(fā)現(xiàn)有些改動(dòng),我研究下有沒(méi)有需要改動(dòng)的地方,不過(guò)大致看了下,應(yīng)該沒(méi)啥變化

參考資料:

React Navigation 官方文檔

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92981.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

李濤

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

SSL證書(shū)是一個(gè)域名一個(gè)證書(shū)嗎？多個(gè)域名能用一張SSL證書(shū)嗎？

閱讀 1222·2021-11-22 13:54
大連虛擬主機(jī)怎么選擇-如何選擇虛擬主機(jī)？

閱讀 2462·2021-09-22 15:36
CSS 入門(mén)

閱讀 2766·2019-08-30 15:54
微信公眾號(hào)開(kāi)發(fā)之坑（一）

閱讀 834·2019-08-30 15:53
HTML、CSS基礎(chǔ) {未完待續(xù)}

閱讀 3195·2019-08-30 15:53
前端每日實(shí)戰(zhàn)：19# 視頻演示如何用純 CSS 創(chuàng)作一種有削鐵如泥感覺(jué)的菜單導(dǎo)航特效

閱讀 541·2019-08-29 15:21
常用瀏覽器私有屬性小記

閱讀 2897·2019-08-28 18:28
重新認(rèn)識(shí)caniuse

閱讀 3045·2019-08-26 13:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Mobx + React Native 獲取路由的狀態(tài)信息

相關(guān)文章

**前端每周清單半年盤(pán)點(diǎn)之 React 與 ReactNative 篇**

React 328道最全面試題(持續(xù)更新)

React Native 搭配 MobX 使用心得

**Flutter+Mobx實(shí)戰(zhàn)，寫(xiě)一個(gè)App應(yīng)用**

**Redux 的問(wèn)題：React、MobX 和 Realm 能解決嗎？**

發(fā)表評(píng)論

0條評(píng)論

李濤

男|高級(jí)講師

TA的文章

SSL證書(shū)是一個(gè)域名一個(gè)證書(shū)嗎？多個(gè)域名能用一張SSL證書(shū)嗎？

大連虛擬主機(jī)怎么選擇-如何選擇虛擬主機(jī)？

CSS 入門(mén)

微信公眾號(hào)開(kāi)發(fā)之坑（一）

HTML、CSS基礎(chǔ) {未完待續(xù)}

前端每日實(shí)戰(zhàn)：19# 視頻演示如何用純 CSS 創(chuàng)作一種有削鐵如泥感覺(jué)的菜單導(dǎo)航特效

常用瀏覽器私有屬性小記

重新認(rèn)識(shí)caniuse

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Mobx + React Native 獲取路由的狀態(tài)信息

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！