react-native项目新建步骤

前提是开发环境已经搭建好
步骤参考：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