React Native系列【mac下环境搭建】

本文仅用来记录个人安装过程备忘

环境

安装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 [email protected]...
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  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块，显示更多文字。

        
          I like React Native!
        

按“Cmd+R”，可以看到模拟器中界面已成功更新！

开发菜单

在模拟器中按“Cmd+D”弹出开发菜单，可以打开“Live Reload”这样代码保存后就会自动更新了。

其它菜单以后碰到再说。

参考

https://reactnative.cn/docs/getting-started.html

https://blog.csdn.net/c_kite/article/details/79215023