当前位置: > > > React Native - macOS下环境搭建(开发第一个应用)

React Native - macOS下环境搭建(开发第一个应用)

本文演示如何在 Mac 系统下搭建 React Native 的开发环境,并创建一个简单的 iOS 应用。如果不了解 React Native 的话,可以看下我之前写的文章:React Native - 入门介绍(起源、特点、与其它移动技术的比较)

一、环境的搭建

1,安装Node.js :
主要是用来下载和安装 React Native,地址:https://nodejs.org
将下载下来的pkg文件运行安装即可。

在终端运行 npm -v,如果出现版本号则说明 Node.js 安装成功

2,安装Homebrew、watchman、flow

在终端中运行如下命令安装 Homebrew,并通过 Homebre 安装 watchman flow
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install watchman
brew install flow

3,安装react-native-cli

在终端中输入如下命令通过 npm 安装 react-native-cli 的命令行工具(其中 -g 表示全局安装)
npm install -g react-native-cli
如果安装过程中发现需要管理员权限,可以在命令前加 sudo
sudo npm install -g react-native-cli
出现如下界面则说明安装成功了:

以后如果要更新 react-native-cli,可以执行如下命令:
sudo npm update react-native-cli -g
由于国内的网络特殊,如果发现使用npm安装太慢。可以改用淘宝镜像安装,具体参考我的另一篇文章: Cordova - 使用淘宝NPM镜像解决cordova无法安装,安装慢的问题

二、创建项目

1,在终端中运行cd命令进入创建项目工程的目录位置 
比如我们想把工程创建在用户文稿目录下:
cd ~/Documents

2,创建工程项目
我们运行如下命令创建一个名为 HelloWorld 的项目。
react-native init HelloWorld
可以看到 Documents 文件夹下已经成功地创建了这项目。

项目文件夹里面的内容如下:

3,运行程序

有两种方式可以启动程序:
(1)点击 ios 文件夹里的 HelloWorld.xcodeproj 打开项目,并启动运行。
(2)或者打开终端,进入工程目录,执行如下命令启动程序。
react-native run-ios
运行效果如下:

而且除了会启动模拟器外,还会启动一个终端 React Packager

4,编辑index.ios.js文件

我们将这个 js 文件中的如下内容:
Welcome to React Native!
改成:
欢迎访问 hangge.com

5,查看效果 

上面修改保存。我们不需要再重新编译运行程序。只需要在模拟器上按 Cmd+R 快捷键进行刷新即可。可以看到刚才修改的 JavasScript 文件直接生效了。

代码能实时渲染的原因:
之所以能做到代码的实时渲染,是因为应用启动运行时会自动请求 bundle 文件,里面存放的是应用的全部逻辑代码。
这个文件并不是项目中的静态资源文件,而是上面提到的“packager终端”服务通过动态分析 index.io.js 中的依赖,并对其进行合并得到的。这个服务运行代码实时渲染。这样我们修改了 JavaScript 文件的代码,不需要重新通过 Xcode 编译也能看到效果。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作。

打赏支持
评论1
  • 1楼
    2017-01-06 16:07
    macfai

    刚刚跟着做了一边,很受用

    站长回复

    我也很高兴这篇文章对你有用。