React-Native开发总结+构建-调试-基础归纳总结

更新时间：2017年11月07日16:47:07

    对于前端工程师来说，这几年是最辉煌的时刻，前端框架层出不穷，而且出现了像RN这种功能的框架，更让移动开发工程师大跌眼镜望洋兴叹。新技术的不断涌现，说明了一个问题，前端在编程技术界的地位越来越高，而且前端工程师的岗位越来越有挑战性，如果不努力学习就赶不上大部队了。

    虽然RN框架兼容Android和iOS平台，即一套代码开发出的native app可以运行在两个不同的操作系统环境上，但兼容性问题是非常多的，尤其在具体功能的实现上需要做兼容处理。更多的兼容性问题，我会在后期项目上线后整体出来发布。

一、Android开发环境的配置和搭建

    本人第一次从开始配置环境到项目成功运行，花费了整整3天的时间，因此，对于初学者来说，不要太着急，一步一步来操作，遇到问题解决问题，心态要好。搭建环境的大致步骤，可以参考官方文档 的相关步骤。

    具体细节问题，整理如下，可做参考：

    需要的基础环境：NodeJS，GIt，java开发环境，Android studio开发包，genymotion模拟器

1、关于模拟器

    genymotion软件是一个手机模拟器容器，这个软件自带很多手机，尺寸和Android版本可根据项目需求进行选择和配置，下载一个属于自己的模拟器手机会自动嵌入式的安装在genymotion中。（首次启动手机，需要打开开发者模式，设置-关于手机-版本号-点击10次左右-开启开发者模式弹框，设置-开发者模式-打开）安装步骤参考这里。

    另外一个国产模拟器夜神也可以当做开发调试使用。

2、关于adb

    adb全称为Android Debug Bridge，就是起到调试桥的作用。这是一个工具（软件），可以管理设备或手机模拟器的状态。还可以进行很多手机操作，如安装软件、系统升级、运行shell命令等等。adb就是连接Android手机与PC端的桥梁，可以让用户在电脑上对手机进行全面的操作。adb的相关操作，以下命令需要配置adb环境变量：

    $ adb devices;//查看模拟器设备是否运行

    $ adb kill-server;//关闭服务

    $ adb start-server;//打开服务

3、关于Gradle

    Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具，也是一个基于JVM的构建工具。在命令行安装不上的解决方案：本地手动安装。

    去官网 下载自己需要的版本，解压ZIP文件到：C:\Users\wanshaobo\.gradle\wrapper\dists

    以下步骤可以不用操作
    新建环境变量 GRADLE_HOME，即 C:\Users\wanshaobo\.gradle\wrapper\dists\gradle-2.4；
    修改环境变量 Path，追加 %GRADLE_HOME%\BIN;
    输入快捷键 WIN+ R，输入 cmd，在弹出的窗口输入命令行： gradle -v；

二、iOS开发环境的配置和搭建

    请参考官方文档

三、react-native项目调试

0、改变Android项目和ios项目的入口文件

修改Android项目的入口文件为根目录的index.android.js：

/RNdemo/android/app/src/main/java/com/rndemo/MainApplication.java

修改上面的文件内容

@Override
    protected String getJSMainModuleName() {
      return "index";
    }

为

@Override
    protected String getJSMainModuleName() {
      return "index.android";
    }

修改ios项目的入口文件为根目录的index.ios.js：

/RNdemo/ios/RNdemo/AppDelegate.m

修改上面的文件内容

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

为

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

1、在不同设备上打开‘开发者菜单’

Android项目开发：

iMac模拟器：fn + f1 或 command + m

windows模拟器：ctrl + win

真机：摇晃手机

ios项目开发：

command+r reload项目

command+d 打开开发者选项

2、‘开发者菜单’详解

Reload 重新加载APP

Debug JS Remotely 开启在Chrome浏览器的远程调试，下面详细讲解

Enable Live Reload

Enable Hot Reloading 开启热加载，代码编辑器代码变动，保存后APP会直接产生变化

Toggle Inspector 开启监听器

Show Perf Monitor

Start/Stop Sampling Profiler

Dev Settings 开发设置

3、在真机上运行和调试

真机上安装请使用Android Studio或Xcode

Apk安装到真机，如果版本不对，或者不能连上电脑实时调试，需要摇一摇，开启'开发者选项'对话框，

选择Dev Settings-Debugging-Debug server & port for device-10.102.11.232:8081，

端口号8081需要看启动的服务，设置成自己电脑的IP，就可以连上电脑在线调试项目；

4、像开发web项目一样查看DOM元素和CSS样式

$react-devtools

打开了React Developer Tools工具面板，然后开启'开发者选项'对话框，Toggle Inspector-inspect，

然后点击元素，相应的dom结构和css样式会在React Developer Tools工具面板中显示；

5、查看点击区域大小

打开'开发者选项'，Toggle Inspector-TouchAbles，选中一个可点击元素，然后关闭

Toggle Inspector，所有可点击元素边框高亮显示；

6、Chrome浏览器断点调试

开启'开发者选项'对话框，选择Debug JS Remotely，然后再Chrome浏览器中打开‘开发者工具’-

在三个点中选择Show console drawer，此时‘开发者工具’上面显示代码，下面显示日志；在Sources面板的左侧

目录中选择debuggerWorker.js，打开相应的文件，在语句上添加断点，即可进行相应高级调试；

7、真机和模拟器抓包调试

抓包配置如下：

iMac：Charles

Windows：jsFiddle

配置：需要设置真机或模拟器WiFi的IP代理与电脑相同，端口号与抓包工具的监听端口相同

8、第三方包

查看第三方包的入口，www.npmjs.com
react-timer-mixin 定时器

react-native-linear-gradient 渐变色

react-native-svgsvg 容器

react-navigation 路由-导航

react-redux

redux

react-native-svg

react-native-art js绘图库

react-native-storage

9、Android Studio的使用

开发RN项目的首选编辑器是webstorm，但Android Studio工具方便管理项目；

为一个RN项目启动服务，常规是在terminal终端输入react-native run -android，但也可以用Studio启动：

在Studio中加入插件RN Console，Android Studio-Preferences-Plugins-Browse Repositories，搜索并安装

这个插件，这个插件有两个功能模块Welcome和React Packager，在React Packager可以run开启服务；

四、React native的官方API，用法import { *** } from 'react-native'

BackHandler

监听安卓物理返回键，不重写监听事件，则返回上一个页面，返回false执行默认行为

用法一，BackHandler.exitApp()从首页退出APP；

用法二，

BackHandler.addEventListener('hardwareBackPress',this.onBackAndroid);

BackHandler.removeEventListener('hardwareBackPress',this.onBackAndroid);

onBackAndroid = ()=>{ ... return true}//return true阻止默认行为

注意：hardwareBackPress事件监听与卸载的位置，监听一般在componentWillMount中，但卸载不一定在componentWillUnMount中，因为页面跳转不一定走componentWillUnMount，比如this.props.navigation.navigate('A')是向页面栈的入栈操作，上一个页面不会销毁

<Modal />组件的物理返回键重写为onRequestClose

Platform

用法Platform.OS === 'android' || 'ios'

DeviceEventEmitter

通知-广播，页面回退刷新机制

使用：import {DeviceEventEmitter} from 'react-native'

DeviceEventEmitter.addListener('refreshHomePage',(data)=>{this.refreshHomePage(data)});

DeviceEventEmitter.remove('refreshHomePage');

DeviceEventEmitter.emit('refreshHomePage',data)

需求，B页面goBack到A页面，A页面刷新；

第一个方案，

this.props.navigation.navigate('B',{callback:()=>{this.refreshA()}});

this.props.navigation.state.params.callback();

this.props.navigation.goBack();

第二个方案，广播

StatusBar

状态栏组件

主页设定一次，整个项目的状态栏都一致

设置顶部导航组件样式：height:72,paddingTop:16

<StatusBar backgroundColor={'transparent'} hidden={false} translucent={true} />

console.log(StatusBar.currentHeight);//Android平台状态栏高度，常量

五、报错汇总

错误一：

>Could not resolve all dependencies for configuration ':app:_debugApk'.

   > Configuration with name 'default' not found.

原因：项目加入第三方包，然后npm uninstall，卸载包之后，需要手动删除Android项目中的配置

分别删除三个地方文件中的配置：

/RNdemo/android/settings.gradle

/RNdemo/android/app/build.gradle

/RNdemo/android/app/src/main/java/com/rndemo04/MainApplication.java

警告二：

使用FlatList组件时，如果属性值没有传递key值，会报警告，

解决方案：

<FlatList

keyExtractor={this._keyExtractor}

/>

_keyExtractor = (item, index) => index;

六、iconfont使用

在阿里巴巴矢量图标库中选择项目需要的icon，添加到购物车，新建一个项目名称，将选取的icon放到这个项目中，

然后下载导出iconfont.ttf文件；

Android项目，将ttf文件放到，/project/my_App/android/app/src/main/assets/fonts/iconfont.ttf

iOS项目，将ttf文件放到，/project/my_App/ios/my_App/iconfont.ttf

使用方法：

<Text style={{fontFamily: 'iconfont', color: '#cbcbcb', fontSize: D(20)}}>&#xe601;</Text>

&#xe601;为Unicode编码

未完，待续...