React Native学习(一)环境搭建以及一些坑

前言

现在react-native 确实很火, 其跨平台能力以及接近原生的体验确实值得学习, 所以我也来凑个热闹学习一下, 学习一下后发现虽然大部分通过js编写但语法还是稍有不同的, 在此分享下

一、环境配置

以下为Mac下的环境搭建

1. 安装Mac下的包管理工具HomeBrew
   $ /usr/bin/ruby -e "$(curl -fsSL
2. 安装node以及npm
   $ brew install node
   npm为node附带的, 不用另外安装, 如何使用npm下载一些依赖资源的时候下不动, 可以开VPN或更换npm镜像, 一般推荐使用淘宝的
   $ npm config set registry https://registry.npm.taobao.org --global $ npm config set disturl https://npm.taobao.org/dist --global
3. 官方推荐安装的工具Watchman以及Flow
   $ brew install watchman
$ brew install flow

到这里系统环境就基本完成了, 只需要添加react-native就可以开始了, 但手动添加还需要配置一大推东西, 所以推荐使用一些脚手架工具来完成, 这样可以大大的简便地创建一个初始的react-native项目

• react-native-cli
  安装 react-native-cli
  $ npm install react-native-cli -g
  新建一个项目
  $ react-native init myReactNativeApp -- version 0.39.2
  注: (-- version 为指定RN的版本) Xcode版本一定要高于项目中RN的版本, 不然会导致编译失败
  $ cd myReactNativeApp $ react-native run-ios

二、遇到的一些问题及解决方法

• Xcode模拟器上无法打开RN的开发者选项卡#####

关闭xcode模拟器的虚拟键盘即可: cmd + shift + K

• 运行时遇到Error watching file for changes: EMFILE错误#####

需要重新安装watchman

1.卸载原来安装的watchman:
$ brew uninstall --force watchman
2.删除原来的安装文件:
$ rm -rf /usr/local/var/run/watchman/
3.重新安装watchman:
$ brew install watchman

• 添加图片资源后出现 /back-icon@4x.ios.png: Unexpected character

关闭模拟器关闭serve
执行$ react-native link
再重新build

• getScrollableNode is undefined

部分API在还没有声明的时候调用
例: 在componentDidMount中使用DeviceEventEmitter监听通知时, 就会报这个错误, 将其放在InteractionManager.runAfterInteractions中延迟调用, 即可解决

PS: 初次学习RN, 有不对的地方欢迎指出和讨论