前言
现在react-native 确实很火, 其跨平台能力以及接近原生的体验确实值得学习, 所以我也来凑个热闹学习一下, 学习一下后发现虽然大部分通过js编写但语法还是稍有不同的, 在此分享下
一、环境配置
以下为Mac下的环境搭建
- 安装Mac下的包管理工具HomeBrew
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - 安装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 - 官方推荐安装的工具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-ioscreate-react-native-app
在使用react-native-cli的时候有一个问题, 在我自己电脑上一切都好好的, 但公司电脑上如果用react-native 0.39以上的版本就会编译失败, 然后网上找了好久也没有解决, 最后的看到github上issue上说用create-react-native-app这个构建项目, 试了下还真的可以了, 感觉挺好用的, 推荐一下, 另外如果有人知道react-native-cli那个问题怎么解决请告知一下
安装
$ npm install create-react-native-app -g
初始化一个项目
$ create-react-native-app my-app
$ cd my-app
$ npm start
至此就已经创建了一个react-native项目了, 这个相比cli有个好处就是不用xcode或studio也能开发调试, 其配合Expo就可以预览和开发了, 具体就不介绍了, 详细介绍见链接
start后只有js部分代码, 如果想添加native部分, 可以通过下面命令
$ npm run eject注: 此步骤不可逆
用Xcode编译运行项目
$ npm 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, 有不对的地方欢迎指出和讨论
