Mobx + React Native 获取路由的状态信息

李涛发布于2019-08-22 14:54 / 2160人阅读

摘要：年前公司由一个项目是使用来开发的所以遇到了一些问题比较影响开发进程的就是路由问题了实际上就是这个组件比较难懂这里给大家讲解一下希望大家少踩点坑另外本篇文章使用的是环境主要讲解的还是如何使用记录中路由的状态但是会穿插一些小内容这里虽然讲到的是

年前公司由一个项目是使用 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地址】

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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