在Mac平臺(tái)上開發(fā)React Native 需要安裝一下環(huán)境和工具

1. Note.js
2. React Native Command Line Tools
3. Xcode/AndroidStudio

一.安裝Node.js

Node.js是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)， 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。Node.js 使用事件驅(qū)動(dòng)， 非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。

好了讓我們安裝吧

安裝說(shuō)明

在Mac上安裝Node.js 可以通過(guò)Homebrew.

打開終端運(yùn)行如下命令:(安裝時(shí)間可能有點(diǎn)長(zhǎng),耐心等待)

brew install node 

也可以在Node.js 官網(wǎng)下載安裝包進(jìn)行安裝
安裝完成后輸入命令

npm - v

查看一下安裝的版本號(hào)說(shuō)明安裝成功

二.安裝React Native 命令號(hào)工具

node.js 安裝成功之后,接下來(lái)我們可以通過(guò)npm install 安裝React Native 命令行工具.
打開終端,輸入并執(zhí)行下面的命令即可完成安裝

npm install -g react-native-cli

image.png

這時(shí)已經(jīng)安裝成功

輸入查看react-native命令

react-native --help

image.png

react-native init <項(xiàng)目名稱>創(chuàng)建你的react-native項(xiàng)目

三.Xcode/AndroidStudio

不多說(shuō)了,自己去下載吧

四.創(chuàng)建第一個(gè)React Native應(yīng)用

終端輸入以下命令

react-native init HelloReactNativeApp

出現(xiàn)如圖

image.png

安裝完成后

image.png

React Native 會(huì)從npm上下載一些項(xiàng)目所依賴的包,并完成項(xiàng)目初始化

安裝時(shí)報(bào)的錯(cuò)誤

image.png

輸入命令

 npm install -save react@~16.4.1

如果運(yùn)行Xcode還報(bào)這個(gè)錯(cuò)誤

image.png

1. 沒(méi)有執(zhí)行npm install命令,沒(méi)有安裝依賴,此時(shí)執(zhí)行npm install 安裝依賴即可.
2. 依賴已經(jīng)安裝,但還是會(huì)報(bào)這個(gè)錯(cuò),此時(shí)將項(xiàng)目下node_modules文件夾刪除,再次執(zhí)行npm install 命令安裝依賴即可.

運(yùn)行起來(lái)了,但是模擬器又顯示如圖

image.png

有關(guān)于 No bundle URL present解決辦法
查看這個(gè)鏈接
我的因?yàn)榇蜷_了 shadowwocks的網(wǎng)絡(luò)代理,關(guān)掉就好了

最終大功告成

image.png

我的微博:slowdony