01.初识React Native

在Mac平台上开发React Native 需要安装一下环境和工具

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

一.安装Node.js

Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

好了让我们安装吧

安装说明

在Mac上安装Node.js 可以通过Homebrew.

打开终端运行如下命令:(安装时间可能有点长,耐心等待)

brew install node 

也可以在Node.js 官网下载安装包进行安装
安装完成后输入命令

npm - v

查看一下安装的版本号说明安装成功

二.安装React Native 命令号工具

node.js 安装成功之后,接下来我们可以通过npm install 安装React Native 命令行工具.
打开终端,输入并执行下面的命令即可完成安装

npm install -g react-native-cli

image.png

这时已经安装成功

输入查看react-native命令

react-native --help

image.png

react-native init <项目名称>创建你的react-native项目

三.Xcode/AndroidStudio

不多说了,自己去下载吧

四.创建第一个React Native应用

终端输入以下命令

react-native init HelloReactNativeApp

出现如图

image.png

安装完成后

image.png

React Native 会从npm上下载一些项目所依赖的包,并完成项目初始化

安装时报的错误

image.png

输入命令

 npm install -save react@~16.4.1

如果运行Xcode还报这个错误

image.png

1. 没有执行npm install命令,没有安装依赖,此时执行npm install 安装依赖即可.
2. 依赖已经安装,但还是会报这个错,此时将项目下node_modules文件夹删除,再次执行npm install 命令安装依赖即可.

运行起来了,但是模拟器又显示如图

image.png

有关于 No bundle URL present解决办法
查看这个链接
我的因为打开了 shadowwocks的网络代理,关掉就好了

最终大功告成

image.png

我的微博:slowdony