React-Native开发技巧

前言

在学习和开发ReactNative的过程遇到了很多问题，所以在此把遇到的一些问题记录下来，也让一些人少走一些弯路。正所谓独乐乐不如众乐乐。

基础篇

1.项目构建
react-native init 项目名 (—version 版本号)可忽略
安装组件和删除组件
npm install/uninstall --save 组件名称
比如:npm install/uninstall --save react-native-router-flux

2.项目运行
iOS模拟器
react-native run-ios --simulator "iPhone 8”

后面可以跟指定模拟器名称或者真机的名称，也可忽略不写

android模拟器
android模拟先要在网上下载一个模拟器(mac的android模拟器很坑，只有android 4.0的版本)，最后使用真机去调试，这里介绍夜神模拟器和海马模拟器的链接方法。链接之前可以先查看当前可连接的设备

emulator -avd -list-avds
adb connect 127.0.0.1:62001 //夜神模拟端口
adb connect 192.168.56.101:5555  //海马模拟端口

然后运行
react-native android

android模拟器因为没有实体键所以可以使用adb shell input keyevent 82调出调试菜单

运行报错
1.RN项目报 ‘config.h' file not found或者WebSocket/libfishhook.a
这个错误可以运行ReactNative内部的脚步进行修复

cd ./node_modules/react-native/third-party/glog-0.3.4 
../../scripts/ios-configure-glog.sh

然后关掉运行的服务，再次运行命令行就可以了

2. libstdc++6.0.9 not found
   这是因为苹果在XCode10中移除了libstdc++(libstdc++.6、libstdc++6.0.9)库。
   项目解决方法：在xCode的build Phases里Link Binary With Libraries删除libstdc++(libstdc++.6、libstdc++6.0.9)库，然后添加libc++库。

3.集成二维码扫描react-native-ac-qrcode运行时可能会出现错误
undefined is not an object (evaluating_react.PropTypes.oneOfType')

这是由于在RN0.49这个版本以后把PropTypes这个属性类别校验单独抽离出来，所以要找到node_modules里ac-qrcode和它的依赖库react-native-camera里index.js内部引用方式改为新版的写法,然后在把ac-qrcode里QRScanner的React.PropTypes.xxx改为Protypes.xxx**

删除
PropTypes import React, { Component, PropTypes } from 'react’
增加 
import PropTypes from 'prop-types'

4.集成react-native-vector-icons 字体识别不了

react-native link react-native-vector-icons 
react-native start –reset-cache 

注意：运行前先关掉RN运行的服务

彩蛋:导入自定义icons字体库的常常需要将对应字体文件生成一个字体集的code文件用来访问字体里的字体，我们可以用一个脚本来做这件事情

#!/usr/bin/python
# -*- coding: utf-8 -*- 
import sys, os

from fontTools.ttLib import TTFont

tmpl = """
var map = {%s};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;
"""

def main(fontFile, output):
    try:
        font = TTFont(fontFile)
        glyphMap = font["cmap"].getcmap(3,1).cmap
        tmp = ""
        for k in glyphMap:
            tmp += '"%s":%s,' % (glyphMap[k],k)

        f=file(output,"w+")
        f.write(tmpl % tmp)
        f.close()   
    except Exception, ex:
        print ex

def showHelp():
    print """
Iconfont map generator.

usage: 
iconfont-maper  
      generate map file from iconfont file .
iconfont-maper -h                       show this help.
"""

if __name__ == '__main__':
    if len(sys.argv) < 2:
        showHelp()
        sys.exit()
    
    if len(sys.argv) == 2 and sys.argv[1] == "-h":
        showHelp()
        sys.exit()

    if len(sys.argv) > 2:
        if os.path.exists(sys.argv[1]):
            main(sys.argv[1],sys.argv[2])
        else:
            print "Font file not found."

        sys.exit()

然后在终端运行下面代码就可以了
python iconfont-mapper.py iconfont.ttf fontawesomeConf.js

第三方优秀框架

• UI库 react-native-elements
• 图片选择库react-native-image-picker
• 标签栏react-native-scrollable-tab-view
• 路由react-native-router-flux推荐挂着铃铛的兔这篇文章
• icon图标库react-native-vector-icons
• 弱提示框react-native-root-toast
• 方块滚动轮播图，类似产品块cell展示，或者卡片式滑动
  react-native-snap-carousel

学习网站

• React Native中文社区
• 上面有一些不错的RN代码实例

结尾

最后附上公司RN重写的项目芸管家,有兴趣可以看下