ReactNative的组件及相关功能使用

备注：代码只提交了js/img/php的部分，原ReactNative部分下边会从初始化开始按步骤加进来，相关环境搭建自己解决。

1. 涉及到的组件

获取设备信息、获取通讯录信息、上传图片、热更新[code-push]、AES数据加密、本地存储[AsyncStorage]、绘制手势曲线、下拉Select框选择、WebView加载H5, Fetch[async/await]拉取数据 等相关组件应应用

2. Screen shot for Android 部分如下：

3. 安装

1. 初始化一个ReactNative项目 并浏览效果

$ react-native init TestMT05
$ cd TestMT05
$ pwd 
$ /var/www/react/test/TestMT05
$ react-native run-android

执行完上边3步的效果如下：

2. 下载当前Git项目 并追加进第一步初始化的RN项目中

$ git clone https://github.com/BoBoGithub/ReactNativeTest.git
$ cd ReactNativeTest
$ cp -r ./* /var/www/react/test/TestMT05

3. 安装关联组件

$ cd /var/www/react/test/TestMT05
$ npm install react-navigation --save
$ npm install react-native-code-push --save
$ npm install react-native-device-info --save
$ npm install react-native-contacts --save
$ npm install react-native-modal-dropdown --save
$ npm install react-native-scrollable-tab-view --save
$ npm install react-native-gesture-password --save
$ npm install react-native-image-picker --save
$ npm install crypto-js --save

$ react-native link

4. 权限设置

新增权限操作 修改文件：/var/www/react/test/TestMT05/android/app/src/main/AndroidManifest.xml
	<!-- 新增 通讯录操作 -->
	<uses-permission android:name="android.permission.READ_PROFILE" />
	<uses-permission android:name="android.permission.READ_CONTACTS" />
	<uses-permission android:name="android.permission.WRITE_CONTACTS" />
	
	<!-- 新增 照片操作 -->
	<uses-permission android:name="android.permission.CAMERA" />
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

5. 错误处理

相关组件：react-native-gesture-password
解决办法：http://blog.sina.com.cn/s/blog_14ad54a500102xhkg.html

6. 重新运行一下 就看到界面了

$ react-native run-android

7. 后端接收数据处理

$ 配置Nginx指向 /var/www/
$ 修改本地IP地址为：sudo ifconfig eth0 172.16.1.95
$ pwd
$ /var/www/react/test/ReactNativeTest
$ cp ./index.php /var/www/react/data/TestMT01/
$ 创建后端程序存放目录 mkdir /var/www/react/data/TestMT01/
$ 创建后端图片上传目录 mkdir /var/www/react/data/TestMT01/img
$ 然后刷新App登录/注册就能看到请求日志 tail -f /var/www/react/data/TestMT01/access.log
$ 备注：注册时的短信验证码 默认是：abc123   |   登录用户名/密码 默认是：user001/123456

备注：目前只调试好了Android版的，IOS的需要XCode环境支持，本人机器不给力装不上，所以就没适配IOS的