环境的搭建
//mac 开发平台，xcode ios 调试工具，JS版本
> 官方安装参考：https://www.reactnative.cn/docs/getting-started.html
> 步骤：
npx react-native init rnApp
cd rnApp
yarn ios
> 也可以用create-react-native-app安装环境：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 # 公共函数
│ ├── App.js # 开始界面
│ ├── config.js # 页面配置
│ └── global.js # 存全局函数
修改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状态管理数据
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>哈哈,如此优秀的我{props.abc}</Text>
<Button title="导航测试"/>
</View>
)
}
export default connect(({ indexModel,demo }) => {
return {
name: indexModel.name,
abc:demo.abc,
};
})(Home);
统一路由配置及统一请求拦截，等待更新。。。
