React-Native集成dva.js
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的更多相关文章
- 将React Native集成至Android原生应用
将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...
- Angular团队公布路线图,并演示怎样与React Native集成
本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...
- 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结
将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...
- React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
- React Native 系列(一) -- JS入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- react native 集成react navigation报错
集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native
React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...
- React Native与原生项目连接与发布
前面的各种环境配置按照官方文档一步一步来,挺详细,宝宝在这里就不多说废话了. 其次,前面的配置,我参照的这个博主的文章React Native 集成到iOS原生项目 下面是宝宝掉过的坑(半径15M): ...
随机推荐
- 【bzoj3262】陌上花开 CDQ分治+树状数组
题目描述 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当且仅当Sa&g ...
- Luogu3959 NOIP2017宝藏(状压dp)
按层dp,f[i][j]表示已扩展i子集的节点当前在第j层的最小代价,预处理点集间距离即可. #include<iostream> #include<cstdio> #incl ...
- BZOJ4602: [Sdoi2016]齿轮 DFS 逆元
这道题就是一个DFS,有一篇奶牛题几乎一样.但是这道题卡精度. 这道题网上的另一篇题解是有问题的.取对数这种方法可以被轻松卡.比如1e18 与 (1e9-1)*(1e9+1)取对数根本无法保证不被卡精 ...
- IE提示是否只查看安全传送的网页内容
IE选项-->安全-->点上面那个地球internet-->点下面那个 自定义级别-->找到“其他”-->显示混合内容,改为启用,重启打开下IE,就可以了
- nowcoder 提高组模拟赛 最长路 解题报告
最长路 链接: https://www.nowcoder.com/acm/contest/178/A 来源:牛客网 题目描述 有一张 \(n\) 个点 \(m\) 条边的有向图,每条边上都带有一个字符 ...
- [BZOJ 2438] [中山市选2011]杀人游戏 Tarjan缩点
这个题很容易想到正解就是缩点找入度为零的点,那么我们考虑一种特殊情况就是,一个入度为零的点我们不访问他就知道他是不是凶手,那么这样的话就是:I. 他是一个真·孤立的点 II. 他在图里但是在他的强联通 ...
- java.lang.NoClassDefFoundError: Lorg/apache/log4j/Logger报错
java.lang.NoClassDefFoundError: Lorg/apache/log4j/Logger报错 错误提示: java.lang.NoClassDefFoundError: Lor ...
- [hdu 4417]树状数组+离散化+离线处理
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4417 把数字离散化,一个查询拆成两个查询,每次查询一个前缀的和.主要问题是这个数组是静态的,如果带修改 ...
- springboot部署多个vue项目
在springboot下部署多个vue项目,只需要将vue打包成静态文件后,将其放在resources的静态文件夹下即可. 如下图:static目录下有三个vue的静态文件夹,分别为运营后台(admi ...
- 修改nginx对http请求数据大小限制
1. 问题发现 在公司搭建了一个基于mindoc的wiki知识库,用nginx做的反向代理服务器,同事在使用过程中上传某个文件一直失败,于是看着看下mindoc自己的日志文件,发现都是类似于fastd ...