前言
最近一版的app使用的是react-native典徘,所以搭個架子總結(jié)下使用到的技術(shù),
希望可以對有興趣入坑的同學(xué)一些幫助益咬。
**## 環(huán)境搭建
## 運行
安裝依賴包
yarn
android
react-native run-android
ios
react-native run-ios
## dva介紹
dva解決了我們使用redux管理數(shù)據(jù)的那些繁雜的步驟逮诲,它把所有的步驟都整合到一個model文件里,在這個文件里你可以管理你的state,處理你的同步action還有異步action梅鹦,而且還整合了redux-saga裆甩,讓你的異步處理變得更簡潔。美滋滋齐唆!
## react-native如何結(jié)合dva
1.初始化react-native項目
2.yarn add dva-core
3.yarn add react-redux
使用dva-core的原因是因為react-native并不支持react-router v4嗤栓,所以我們并不能使用這個路由,我們只需要dva的核心功能就行了蝶念。作者也是在這個版本中把dva-core給單獨提取了出來抛腕,所以我們只需要調(diào)用create的方法把它給實例化,然后調(diào)用start方法把RN上的路由傳進去就行媒殉。
import React from 'react';
import { create } from 'dva-core';
import { Provider, connect } from 'react-redux';
export { connect };
export default (options) => {
const app = create(options);
if (!global.registered) options.models.forEach(model => app.model(model));
global.registered = true;
app.start();
const store = app._store;
app.start = container => () => (
{container}
);
app.getStore = () => store;
return app;
};
## react-native如何添加react-navigation
react-navigation是官方推的一個路由担敌,很好用,切換流暢廷蓉,而且兼容ios和android全封。
## 整合遇到的問題
打包后無法正常運行的情況
1.錯誤的使用dva-no-router,這是react項目使用的,并不適用于rn,改用dva-core + react-redux
2.解構(gòu)失敗: const value = ({}) => { ... }是不允許的桃犬,會報錯
ReactNativeJS: 'Unhandled promise rejection', { [TypeError: undefined is not a function (evaluating 'babelHelpers.objectDestructuringEmpty(r)')]
mac運行出現(xiàn)錯誤
Could not install the app on the device, read the error above for details.Make sure you have an Android emulator running or a device connected and have set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
解決辦法:
在根目錄下運行:chmod 755 android/gradlew然后就解決了
react-navigation問題
很全很詳細
覺得還行給個star或關(guān)注都行刹悴,感謝開源好世界!T芟尽土匀!