React Native集成dva

很久没接触React Native了，之前一直想着集成dva，但是只做到了集成Redux，正好这段时间一直在用taro进行小程序的开发，想了想，应该差不多吧。

项目地址：https://github.com/Tzng/ReactNativeDva

那现在就开始

初始化项目

使用TypeScript进行项目的初始化

npx react-native init ReactNativeDva --template react-native-template-typescript

然后用WebStorm打开它~

image.png

开启HermesInternal

找到这个文件：android\app\build.gradle

在第80行，修改成true

project.ext.react = [
    enableHermes: true,  // clean and rebuild if changing
]

安装几个包~

yarn add dva-core dva-immer dva-loading react-redux redux redux-logger

还有ts文件~

yarn add @types/react-redux @types/redux-logger  -D

开始集成

首先，我们新建一个src目录，然后把App.tsx移入，再新建几个文件夹，大概是这样子

image.png

这里面models就是主要的dva文件，我们先创建一个dva.ts

// @ts-ignore
import {create} from 'dva-core';
// @ts-ignore
import createLoading from 'dva-loading';
// @ts-ignore
import immer from 'dva-immer';
import {createLogger} from 'redux-logger';

let app: {
  use: (arg0: {onError(err: any): void}) => void;
  model: (arg0: any) => any;
  start: () => void;
  _store: {dispatch: any};
  getStore: () => {dispatch: any};
  dispatch: any;
};

let store: {dispatch: any};

let dispatch;

let registered: boolean;

function createApp(opt: any) {
  // redux 的日志
  opt.onAction = [createLogger()];
  app = create(opt);
  app.use(immer());
  app.use(createLoading());
  app.use({
    onError(err: any) {
      console.log('dvaError', err);
    },
  });
  if (!registered) {
    opt.models.forEach((model: any) => app.model(model));
  }
  registered = true;
  app.start();
  store = app._store;
  app.getStore = () => store;
  dispatch = store.dispatch;
  app.dispatch = dispatch;
  if (global) {
    global.dva_app = app;
  }
  return app;
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch;
  },
};

有部分文件没有ts版本，我直接给注释忽略掉了~，这里面的global会报错，因为找不到声明，所以需要定义一个声明文件typings.d.ts
这么个内容就好了

declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';

// 声明
declare let global: {HermesInternal: null | {}; dva_app: any};

其他几个文件，看源码就知道了。接下来就是集成进去了。

集成dva

这里要操作的App.tsx文件

主要是这么几个代码（直接查看GitHub更好~）：

import {Provider} from 'react-redux';
import dva from './models/dva';
import models from './models/index';

const dvaApp: any = dva.createApp({
  initialState: {},
  models: models,
});

const store = dvaApp.getStore();

const App = () => {
  return (
    <Provider store={store}>
      <StatusBar barStyle="dark-content" />

      </SafeAreaView>
    </Provider>
  );
};

测试下

加几个页面试试

我这用的React Navigation 5x，所以写法是不一样的~

对了，如果适用修饰器的话，需要配置一下，看我这个文章react native支持ES7中的修饰器语法@

import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { ConnectProps, ConnectState } from '@/models/connect';

interface IProps extends ConnectState, ConnectProps {
  a: string;
}

interface IState {}

/**
 * 说明：
 * @author ${USER}
 * @date ${DATE}${TIME}
 */
class Home extends Component<IProps, IState> {
  state: IState = {};

  componentDidMount() {}

  render() {
    return <Text>你好{this.props.home.v}</Text>;
  }
}

export default connect(({ home }: IProps) => ({ home }))(Home);

数据能显示出来~

image.png

其他的测试在 GitHub里面

image.png