前提是开发环境已经搭建好
步骤参考：https://reactnative.cn/docs/0.51/getting-started.html
一、打开Terminal，进入到你想存放项目的文件夹
如：
cd ~/Documents/workspace/xingkeduo/
二、创建react-native项目
作用：搭建react-native开发环境
步骤参考：http://facebook.github.io/react-native/docs/getting-started.html
备注：需要建立本地开发环境，而不是官方默认的Expo工具开发
创建一个新应用程序
react-native init ProjectName
运行您的React Native应用程序
cd ProjectName
react-native run-ios
- 在xkdsalon项目里复制xkdsalon/app文件夹和xkdsalon/index.js放到你建立好的项目根目录下（ProjectName/）
- 修改app/index.js里的AppRegistry.registerComponent('ProjectName',() => AppNavigator);
- 并把原本项目里的App.js和app.json删除
三、进入项目，开始导入框架
1、导入框架antd-mobile
作用：包含多个常用组件
步骤参考：https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app
备注：确保引入字体，保证能够使用icon
导入antd-mobile
npm install antd-mobile --save
npm install babel-plugin-import --save-dev
修改相关文件看以上截图
2、引入组件react-native-router-flux
作用：react-native路由管理组件，控制页面跳转及参数传递
步骤参考：https://github.com/aksonov/react-native-router-flux
备注：暂无~
导入react-native-router-flux
npm install react-native-router-flux --save
react-native link
3、引入组件react-native-vector-icons
作用：多种矢量图标
步骤参考：https://github.com/oblador/react-native-vector-icons
备注：暂无~
导入react-native-vector-icons
npm install react-native-vector-icons --save
react-native link
如何使用 (RN 版)
步骤参考：https://mobile.ant.design/components/icon-cn/
打开项目的IOS里的xcode文件
- 下载 https://at.alicdn.com/t/font_r5u29ls31bgldi.ttf 重命名为 anticon.ttf
- 打开 iOS 项目 info.plist 文件，添加 Fonts provided by application，指定一个 item 的值为 anticon.ttf， 将 anticon.ttf 拖进项目；
- Android 项目将 anticon.ttf 放在 android/app/src/main/assets/fonts/ 目录下;
（android真机运行还有其他步骤待补~）
4、引入组件react-native-camera
作用：摄像头组件，可以拍照、扫描二维码、人脸识别
步骤参考：https://github.com/react-native-community/react-native-camera
备注：ios需要设置获取权限的文字提示
导入react-native-camera
npm install react-native-camera --save
react-native link react-native-camera
打开IOS的Xcode文件在hairco/Info.plist的Custorm IOS Target Propertise里添加三个Key
- NSCameraUsageDescription
type是string
Value是填写第一次访问相机时，向用户发送消息（如：我们请求访问您的相机）
- NSPhotoLibraryUsageDescription
type是string
Value是填写第一次访问相册时，向用户发送消息
- NSMicrophoneUsageDescription
type是string
Value是填写第一次访问麦克风时，向用户发送消息
5、引入组件react-native-wechat
作用：微信相关组件
步骤参考：https://github.com/yorkie/react-native-wechat
备注：需要手动配置appid及引入lib
导入react-native-wechat
npm install react-native-wechat --save
为iOS构建安装程序
https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-ios.md
打开IOS的Xcode文件在hairco/在Build Phases里的Link Binary with Libraries里添加以下库：
- SystemConfiguration.framework
- CoreTelephony.framework
- libsqlite3.0
- libc++
- libz
打开IOS的Xcode文件在hairco/在Info里的URL type里添加 app id ：
打开IOS的Xcode文件在hairco/在Info里的Custom iOS Target Properties里添加key ：
LSApplicationQueriesSchemes
type是array
然后添加两个Item
Value是weixin和wechat
6、引入组件react-native-percentage-circle
作用：饼图组件
步骤参考：https://github.com/JackPu/react-native-percentage-circle
备注：暂无~
导入react-native-percentage-circle
npm install react-native-percentage-circle --save
react-native link
7、引入组件react-native-percentage-circle
作用：饼图组件
步骤参考：https://github.com/JackPu/react-native-percentage-circle
备注：暂无~
导入react-native-percentage-circle
npm install react-native-percentage-circle --save
react-native link
