集成dva和react native和react-navigation

先初始化一个react native的项目

npm install -g yarn react-native-cli

react-native init AwesomeProject

准备安装dva 、react-navigation

1.yarn add  dva-core

2.yarn add react-redux

3.yarn add react-navigation

4.yarn add react-native-gesture-handler

5.react-native link react-native-gesture-handler

然后是集成步骤

1.集成dva,使用dva-core和react-redux，新建app文件夹

app文件夹中新建.root.js

import * as React from 'react';
import indexModel from './models/index'
import { Provider  } from 'react-redux';
import App from './routes'//    这个是react-navigation路由文件

import { create } from 'dva-core';

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使用

export default class Container extends React.Component {
  render() {
    return (
      <Provider store={store}>//    注入dva
        <App/>
      </Provider>
    );
  }
}

2.编写路由，react-navigation

app文件夹下新建routes.js

import React, { PureComponent } from 'react'
import {
  TabBarBottom, addNavigationHelpers, createSwitchNavigator,
  createBottomTabNavigator, createStackNavigator, createAppContainer
} from 'react-navigation'
import AuthLoadingScreen from './components/loading/index'
import {StatusBar, View, Platform} from "react-native";

import Home from './pages/Home/Home'
import Order from './pages/Order/Order'
import Get from './pages/Get/Get'
import Register from './pages/Register/index'
import Establish from './pages/Establish/index'
import Restore from './pages/Restore/index'

const AuthStack = createStackNavigator(
  {
    Register: Register,
    Establish: Establish,
    Restore: Restore
  },
);
const HomeNavigator = createBottomTabNavigator(
  {
    Home: { screen: Home },
    Order: { screen: Order },
    Get: { screen: Get }
  }
);

const AppNavigation = createSwitchNavigator(
  {
    App: HomeNavigator,
    Auth: AuthStack,
    AuthLoading: AuthLoadingScreen
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

const App = createAppContainer(AppNavigation);

export default App

3.链接项目

根目录下的index.js

import {AppRegistry} from 'react-native';
import App from './app/root';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

最后，如何在组件中使用dva，点我的另外一篇文章----->点这里