本文仅用来记录个人安装过程备忘
环境
安装node
本机已经安装nvm,直接使用nvm安装
Chaim:~ Chaim$ nvm install 8
Downloading https://nodejs.org/dist/v8.15.1/node-v8.15.1-darwin-x64.tar.xz...
######################################################################## 100.0%
WARNING: checksums are currently disabled for node.js v4.0 and later
Now using node v8.15.1 (npm v6.4.1)
Chaim:~ Chaim$ nvm use v8
Now using node v8.15.1 (npm v6.4.1)
安装Watchman
Watchman是由 Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。
Chaim:~ Chaim$ brew install watchman
安装yarn和react-native-cli
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
Chaim:scibene-app Chaim$ npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安装Xcode
本机已安装Xcode10.1
创建新项目
既然参考中说0.45版本要下载boost等库(虽然机器上各种库都有,正因为各种库都有,版本也比较乱),那就先用0.44.3创建吧。
Chaim:scibene-app Chaim$ react-native init scibeneapp --version 0.44.3
This will walk you through creating a new React Native project in /Users/Chaim/Documents/workspace/scibene-app/scibeneapp
Using yarn v1.15.2
Installing react-native@0.44.3...
yarn add v1.15.2
...
To run your app on iOS:
cd /Users/Chaim/Documents/workspace/scibene-app/scibeneapp
react-native run-ios
- or -
Open ios/scibeneapp.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd /Users/Chaim/Documents/workspace/scibene-app/scibeneapp
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android
创建项目成功后,可以在提示中找到怎么在iOS和Android中运行。
编译运行
运行ios版本
Chaim:scibene-app Chaim$ cd scibeneapp/
Chaim:scibeneapp Chaim$ react-native run-ios
iPhone模拟器启动了,想像中的app界面没有出现(R老板说他弄半天没启动起来,本想打他脸的,没给我面子啊),命令提示错误,如下:
~/Documents/workspace/scibene-app/scibeneapp/node_modules/react-native/packager ~
./packager.sh: line 11: node: command not found
~
Process terminated. Press <enter> to close the window
模拟器也提示一个红色背景的“No bundle URL present.”错误信息。
No Bundle URL present解决
看提示的错误,似乎是要启动个包服务,好像以前很多应用也是这样。还好,简单搜索就有前人把经验分享了,感谢!
就是要用多一个命令行,启动一个后台服务:
Chaim:scibeneapp Chaim$ react-native start
然后再另一个命令行中运行"react-native run-ios"即可。
image.png修改项目
在界面上提示可以直接修改index.ios.js,然后按“Cmd+R”就能重新加载,试一下在Text相关块下增加一个Text块,显示更多文字。
<Text style={styles.welcome}>
I like React Native!
</Text>
按“Cmd+R”,可以看到模拟器中界面已成功更新!
开发菜单
在模拟器中按“Cmd+D”弹出开发菜单,可以打开“Live Reload”这样代码保存后就会自动更新了。
其它菜单以后碰到再说。
网友评论