Mobx + React Native 猎取路由的状况信息

2024年4月30日 255次阅读 来源: SzHeJason

年前公司由一个项目是运用 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<Props, State> {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    let { nav } = stores;
    return (
      <Provider {...stores}>
        <Router
          navigation={addNavigationHelpers({
            dispatch: nav.dispatch.bind(nav),
            state: nav.navigatorState
          })}
        />
      </Provider>
    );
  }
}
// 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 文档,方才上去又看了一下发明有些修改,我研讨下有没有须要修改的处所,不过大抵看了下,应当没啥变化

参考资料:

    原文作者：SzHeJason
    原文地址: https://segmentfault.com/a/1190000013412527
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞