美文网首页
RN-开发环境搭建-Mac平台

RN-开发环境搭建-Mac平台

作者: hliccy | 来源:发表于2017-06-07 20:17 被阅读93次

1 NodeJS开发环境

2 React Native Command Line Tools 工具

3 Xcode/AndroidStudio

4 HelloReactNative

安装NodeJS开发环境

Homebrew Mac系统的包管理器, 用于安装NodeJS和其它工具软件Homebrew详细介绍

brew install <软件名称>
    •   Homebrew 会将套件安装到独立目录,并将文件软链接至 /usr/local 。
    •   Homebrew 的所有文件均会被安装到预定义目录下,所以您无需担心 Homebrew 的安装位置。
brew search <软件名称>
执行此命令,brew会匹配有关该名称的所有软件并标识已经安装的软件。
brew list 查看用brew安装的所有软件
brew update
brew upgrade <使用brew已安装的软件名称>
brew uninstall <使用brew已安装的软件名称>
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

注意:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

安装Node环境
我们在初始化React Native应用或从npm上安装一些组件的时候通常的情况下是比较慢的,这是因为npm的服务是设在国外的,所以在国内访问的速度不是很理想。提高项目初始化的速度我们可以为npm设置一个国内镜像,让npm每次下载组件的时候都从国内的镜像上获取这样一来速度就会大大提高。

brew install node
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

在iOS电脑上我们可以在.npmrc文件中设置npm的下载镜像地址,.npmrc文件通常在/Users/用户名/.npmrc路径下,打开此文件然后添加:registry = https://registry.npm.taobao.org

安装React Native Command Line Tools 工具

npm install -g react-native-cli

如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权

sudo chown -R `whoami` /usr/local

React Native命令行工具安装成功之后,我们可以通过react-native --help来查了它索支持的所有命令

安装Xcode/AndroidStudio

AppStore上搜索XCode并进行下载安装

Android开发环境详见 Mac系统 Android开发环境配置

HelloReactNative

初始化一个React Native应用,我们可以通过React Native命令行工具来完成,打开终端输入并运行下面命令:

react-native init <项目名字>
如:
react-native init HelloReactNative


运行应用

第一种方式:通过React Navtive命令行工具

cd HelloReactNative
react-native run-ios
react-native run-android

注: 

1 执行 react-native run-android 需要先启动android模拟器
2 执行失败
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

进入android文件夹 添加 local.properties  添加android sdk路径 
如: sdk.dir = /Users/用户/Library/Android/sdk

第二种方式:通过Xcode或者AndroidStudio运行项目

相关文章

网友评论

      本文标题:RN-开发环境搭建-Mac平台

      本文链接:https://www.haomeiwen.com/subject/xbmafxtx.html