環(huán)境的搭建
//mac 開發(fā)平臺霞篡，xcode ios 調(diào)試工具胧辽，JS版本
> 官方安裝參考：https://www.reactnative.cn/docs/getting-started.html
> 步驟：
npx react-native init rnApp
cd rnApp
yarn ios
> 也可以用create-react-native-app安裝環(huán)境：https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app
> 步驟：
yarn add -g create-react-native-app
create-react-native-app rnApp
cd rnApp
yarn start
//到這里就安裝完成了
ui庫:@ant-design/react-nativ
yarn add @ant-design/react-native
鏈接字體圖標：yarn react-native link @ant-design/icons-react-native
//如果 這里報找不到 react-native川抡，全局安裝
yarn add react-native-cli -g
> 安裝pod-install
cd rnApp/ios
npx pod-install
> 最后cd rnApp(開兩個終端)
一個 yarn ios
一個 yarn start
//如果不報錯，項目就正常運行了,第一次運行會比較慢。
我這邊安裝完了，報的錯誤是 Could not find "PodFILE.lock",Did you run "pod install" in ios directory?
重新安裝一下：brew install cocoapods
或升級一下cocoapods
重新安裝一下:pod-install
解決 React-Native mac 運行報錯 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by ope
rm -rf node_modules && yarn cache clean
yarn install
rm -rf ~/.rncache
然后重新運行
yarn ios
yarn start
新增src工程目錄
├── src # code directory
│ ├── components # 存放公共組件庫代碼
│ ├── models # models
│ ├── pages # 每個頁面
│ ├── routes # 路由配置基茵，每個頁面需要引入一下
│ ├── services # 請求
│ ├── utils # 公共函數(shù)
│ ├── App.js # 開始界面
│ ├── config.js # 頁面配置
│ └── global.js # 存全局函數(shù)
修改app.js入口文件的導入目錄地址
在index.js文件里
import {AppRegistry} from 'react-native';
import App from './src/App'; //修改app地址
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
使用dva狀態(tài)管理數(shù)據(jù)
1刻撒、安裝dva-core，react-redux
> yarn add dva-core react-redux
2耿导、在app.js
import indexModel from './models/indexModel';
import demo from './models/demo';
import { Provider } from 'react-redux';
import { create } from 'dva-core';
import Home from './pages/Home';
const models = [indexModel,demo];
const app = create(); import Home from './pages/Home';
models.forEach((o) => {
// 裝載models對象
app.model(o);
});
app.start(); // 實例初始化
const store = app._store; // 獲取redux的store對象供react-redux使用
const App = () => {
return (
<Provider> store={store}>
<!--這里以引入Home組件為例子-->
<Home/>
</Provider>
)
}
export default App;
> models 文件就是正常的寫法声怔，這里以indexModel為例
export default {
namespace: 'indexModel',
state: {
name:'123'
},
effects: {
},
reducers: {
updateState(state, { payload }) {
return { ...state, ...payload };
}
},
}
> Home 組件
import React from 'react';
import { View, Text, Button } from 'react-native';
import {connect} from 'react-redux';
const Home = (props) => {
return (
<View>
<Text>你好:{props.name}</Text>
<Text>哈哈,如此優(yōu)秀的我{props.abc}</Text>
<Button title="導航測試"/>
</View>
)
}
export default connect(({ indexModel,demo }) => {
return {
name: indexModel.name,
abc:demo.abc,
};
})(Home);
統(tǒng)一路由配置及統(tǒng)一請求攔截，等待更新舱呻。醋火。。
