前言
在学习和开发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
然后关掉运行的服务，再次运行命令行就可以了
-
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 <iconfont> <output> 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
学习网站
结尾
最后附上公司RN重写的项目芸管家,有兴趣可以看下
网友评论