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 (
      //      dva
        
      
    );
  }
}

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를 사용하는지, 나의 다른 문장을 누르십시오 ---> 여기를 누르십시오

좋은 웹페이지 즐겨찾기