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 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React Native + Expo 앱을 Deploy(네이티브 빌드)이 기사에서는 까지 작성 도중의 Hello World 앱 (송장 앱 모형)을 Deploy합니다. 또한 expo-cli가 글로벌 설치되어 있다고 가정합니다. 설치했는지 모르는 경우 을 참조하십시오. Windows의 경...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.