dva와 react native 및 react-navigation 통합
2712 단어 react-nativereduxdvaReact
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를 사용하는지, 나의 다른 문장을 누르십시오 ---> 여기를 누르십시오
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Redux】 【React】 정말 기초 부분. Functional Component에서 Hooks(useDispatch, useSelector)Redux의 기초 부분을 요약합니다. redux-thunk와 redux-saga를 이해하기 위해 Redux가 손으로 움직일 수 있음을 확인했습니다. Functional Component에서 Redux의 Hooks(u...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.