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

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

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

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

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

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

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

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

react-native run-android 运行项目

react-native log-android 打印日志

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、第三方包

常规搜索第三方包(插件)的方法，去npm官网搜索，www.npmjs.com；

同时，rn社区资源有公共维护的js.coach第三方组件库，可以查看这里；

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

react-native-image-zoom-viewer 图集组件-图片翻页、缩放、下载

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开启服务；

10、Android打包

如果没有注入签名，执行./gradlew assembleRelease会生成app-release-unsigned.apk

注入签名成功，执行./gradlew assembleRelease会生成app-release.apk

第一步，生成签名密钥文件app-release-key.keystore

命令行进入指定目录下，比如桌面，执行命令

$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

自定义输入密钥库密码和对应密钥密码，即可在桌面生成密钥文件app-release-key.keystore

第二步，将密钥文件放入工程中，并做相关配置

将密钥文件放入/Users/wanshaobo/project/app/android/keystores/miapp-release-key.keystore

在/Users/wanshaobo/project/app/android/app/build.gradle文件中做如下配置，注意signingConfigs在buildTypes前面：

android{

signingConfigs {

        release {

            storeFile file('../keystores/app-release-key.keystore')

            storePassword '123456'

            keyAlias 'app-key-alias'

            keyPassword '123456'

        }

    }

buildTypes
{
        release {
            signingConfig signingConfigs.release
        }
    }

}

四、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平台状态栏高度，常量

隐藏和显示状态栏：

true ? null :<StatusBar hidden={true}/>

五、报错汇总

错误一：

>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)}}></Text>

为Unicode编码

七、不同平台使用不同的内容、组件、样式

方案一，显示不同内容：

const element = Platform.select({

  ios: '这是ios设备显示的内容',

  android: '这是Android设备显示的内容',

});

const element = Platform.select({
  ios:<Text>456</Text>,
  android: <Text>123</Text>,
});

class page extends Component{

render(){

<View style={Styles.container}>{element}</View>

}

}

方案二，根据组件不同后缀名，使用不同组件，react-native会自动检测文件是否具有.ios或.android的扩展名：

Element.ios.js

Element.android.js

import Element from './Element';

方案三，引入不同依赖：

var
Element = Platform.select({

  ios: () => require('ComponentIOS'),

  android: () => require('ComponentAndroid'),

})();

<Element />;

方案四，渲染样式：

let Styles = StyleSheet.create({

container:{

flex:1,

...Platform.select({

ios:{backgroundColor:'red'},

android:{backgroundColor:'blue'},

})

}

});

let Styles = StyleSheet.create({

container:{

flex:1,

backgroundColor:  (Platform.OS === 'ios') ? 'red' : 'blue',

}

});

方案五，根据路径不同，引入不同组件：

common/components/android/Element.js

common/components/ios/Element.js

未完，待续...