dvajs作为一个基于redux的状态管理框架,在react中的表现还是很不错的,如果我们想要在react-native应用中使用dvajs该怎么做呢?

首先安装dva-core和react-redux:

npm i -S dva-core react-redux

dva-core是dvajs的核心部分,能够很好的和其他react-native组件在一起工作。

dva-core和dva在提供的方法上有一些区别,不过在使用思路上是完全一样的。由于基本没有什么难点,这里就直接贴代码了。

以下是一个react-navigation3.x结合dva-core的一个配置实例:

import * as React from 'react';
import {
createAppContainer,
createBottomTabNavigator,
} from 'react-navigation';
import Index from './Index';
import Home from './pages/Home';
import Cart from './pages/Cart';
import { Provider } from 'react-redux'; import { create } from 'dva-core'; const indexModel = {
namespace: 'index',
state: { count: 1 },
effects: {},
reducers: {
edit(state, { count }) {
state.count += count;
return { ...state };
},
},
}; const models = [indexModel]; const app = create(); // 创建dva实例,可传递配置参数。https://dvajs.com/api/#app-dva-opts models.forEach((o) => { // 装载models对象
app.model(o);
}); app.start(); // 实例初始化 const store = app._store; // 获取redux的store对象供react-redux使用 const appNavigator = createBottomTabNavigator({
Index,
Home,
Cart,
}); const App = createAppContainer(appNavigator);
export default class Container extends React.Component {
public render() {
return (
<Provider store={store}>
<App/>
</Provider>
);
}
}

本文代码:https://github.com/axel10/react-native-dva-typescript-template

React-Native集成dva.js的更多相关文章

  1. 将React Native集成至Android原生应用

    将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...

  2. Angular团队公布路线图,并演示怎样与React Native集成

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...

  3. 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结

    将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...

  4. React Native集成Redux框架讲解与应用

    学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...

  5. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  6. react native 集成react navigation报错

    集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:

  7. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native

    React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...

  9. React Native与原生项目连接与发布

    前面的各种环境配置按照官方文档一步一步来,挺详细,宝宝在这里就不多说废话了. 其次,前面的配置,我参照的这个博主的文章React Native 集成到iOS原生项目 下面是宝宝掉过的坑(半径15M): ...

随机推荐

  1. hw_breakpoint使用方法

    hw_breakpoint 使用方法 kprobe在 do_page_fault 函数中不能使用,那么如果真要在这里打点怎么办呢?看看hw_breakpoint是否可用: 事实证明,即便 hw_bre ...

  2. 域名/网站名/URL

    http://mail.163.com/index.html 1)http://:协议,也就是HTTP超文本传输协议,网页在网上传输的协议. 2)mail:服务器名,代表着是一个邮箱服务器,所以是ma ...

  3. delphi如何模块内部获得自身路径ExtractFilePath和paramstr(0)

    如何模块内部获得自身路径?Exe程序:DLL程序: ExtractFilePath(Application.ExeName) GetCurrentDir TIniFile.Create(GetCurr ...

  4. springMVC笔记一

    第一章 回顾JavaWeb中的MVC设计模式 1)MVC这种设计模式,不光运用于Web领域,而且也能用于非Web领域 2)今天说的MVC特指一种表现层设计模式,不限于Java语言 第二章 回顾stru ...

  5. 【题解】ZJOI2017仙人掌

    感觉这题很厉害啊,虽然想了一天多但还是失败了……(:д:) 这题首先注意到给定图中如果存在环其实对于答案是没有影响的.然后关键之处就在于两个 \(dp\) 数组,其中 \(f[u]\) 表示以 \(u ...

  6. BZOJ 4710 [Jsoi2011]分特产 解题报告

    4710 [Jsoi2011]分特产 题意 给定\(n\)个集合,每个集合有相同的\(a_i\)个元素,不同的集合的元素不同.将所有的元素分给\(m\)个不同位置,要求每个位置至少有一个元素,求分配方 ...

  7. 洛谷 P1379 八数码难题 解题报告

    P1379 八数码难题 题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初 ...

  8. 如何使用Photoshop制作真实的尺子

    前言: 日常生活中经常性的偶尔需要测量一些东西的尺寸,但刚好手头上缺乏尺子等必要的测量工具,这时候其实我们可以利用Photoshop,临时制作一把基于现实物理单位(如:厘米)的虚拟尺子. 难点: 像素 ...

  9. composer应用

    ubentu安装 进入自己的项目根目录cd/path/to/my/project 下载composer curl -s http://getcomposer.org/installer 把这个文件移到 ...

  10. Codeforces Round #538 (Div. 2) (A-E题解)

    Codeforces Round #538 (Div. 2) 题目链接:https://codeforces.com/contest/1114 A. Got Any Grapes? 题意: 有三个人, ...