1. 程式人生 > >mac 配置React Native的開發環境

mac 配置React Native的開發環境

1.0基礎環境

1.1  安裝homebrew

Homebrew是OS X的套件(包)管理器,用於安裝Node.js和一些其他必須的工具軟體。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1.2  安裝nvm管理nodejs

安裝nvm
nvm是node.js的版本管理器,可以用nvm來安裝node.js
$brew install nvm
安裝node
$nvm install node
1.3  安裝WatchMan
brew install watchman

1.4  安裝Flow
brew install flow

2.0React Native安裝

安裝完node後建議設定npm映象以加速後面的過程(或使用科學上網工具)。注意:不要使用cnpm!cnpm安裝的模組路徑比較奇怪,packager不能正常識別!

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

Yarn、React Native的命令列工具(react-native-cli)#
Yarn是Facebook提供的替代npm的工具,可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務(packager)等任務。
sudo npm inst all -g yarn react-native-cli

安裝完yarn後同理也要設定映象源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
2.2 建立reactnative專案
react-naive init 專案名稱 
/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home
選擇react-native版本
npm update -g react-native-cli
查詢react-native的npm包最新版本
npm info react-native
升級或者降級npm包的版本
npm install --save 
[email protected]

下載jdk並設定jdk 環境變數
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH
export CLASS_PATH=$JAVA_HOME/lib:$CLASS_PATH

安裝android studio 翻牆環境下,並耐心等待

設定環境變數:ANDROID_HOME

$ vim ~/.bash_profile
export ANDROID_HOME=/usr/local/opt/android-sdk # 以實際位置為準
$ source ~/.bash_profile # 立即生效
僅以三張圖紀念自己



監聽檔案的改變以達到實時重新整理:
$ react-native start

期中android的環境配置最為坑爹,還請大家耐心解決問題


參考連線:

https://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a9197c8dbc4700c40bb907e56c&scene=1&srcid=0808BT91kp5iX5xNRV0WuWrQ#rd

http://www.jianshu.com/p/cb8bbb499841

https://segmentfault.com/a/1190000004068339

React Native for Android 除錯技術剖析

http://taobaofed.org/blog/2015/11/25/react-native-android-debug/

相關推薦

安裝配置React Native開發環境

步驟如下: 1、安裝HomeBrew,命令如下: JerryMacBook-Pro:~ Jerry.Yao$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install

Mac電腦配置IOS React Native開發環境配置筆記

React Native(以下簡稱RN)的開發環境配置直接參考官方文件即可完成,不過對小白來說東西有點多,有些名詞不是很好理解,這裡就官方的安裝文件稍微展開說一下。 中文版配置說明:不錯的中文說明。官方英文版配置說明:英文不錯的小夥伴可以直接看英文官方的 環境需求:1.Xcode 7.0以上版本 React

mac 配置React Native開發環境

1.0基礎環境 1.1  安裝homebrew Homebrew是OS X的套件(包)管理器,用於安裝Node.js和一些其他必須的工具軟體。 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew

React Native 開發環境安裝和配置

要進行Rect Native 開發你需要安裝如下工具, homebrew,nvm,watchman ,flow和node.js. Homebrew是一個方便開發者在MAC OS X系統上面安裝Linux工具包的ruby指令碼,而MAC OS X已經內建了ruby的

搭建 React Native 開發環境 —— Node.js 安裝和配置

1. 前言 在正式開發 React Native 應用之前,需要先搭建好 React Native 的開發環境。搭建 React Native 開發環境有以下幾個主要步驟。 原生開發工具:iOS 開發使用 Xcode,Android 開發使用 Android

React Native系列教程】Mac(OSX)平臺搭建React Native開發環境

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72575799) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家

Mac上搭建React Native開發環境

概述 前面我們介紹過在window環境下開發React Native專案,今天說說怎麼在mac上搭建一個RN的開發環境。 配置mac開發環境 基本環境安裝 1.先安裝Homebrew:用於安裝NodeJS和其他工具。 注:Homebrew詳

React Native開發環境配置

1.安裝Homebrew: 在MAC中開啟終端工具並輸入如下語句: ruby -e "$(curl --insecure -fsSL https://raw.githubusercontent.com/Homebrew/install/master/inst

Mac下搭建react native開發環境

安裝必需軟體 Homebrew Homebrew, Mac系統的包管理器,用於安裝NodeJS和一些其他必需的工具軟體。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew

React Native開發環境配置

-------------如果你使用的是Mac OS系統,請參照以下步驟----------- 一、環境需求 1.1  安裝Homebrew        Homebrew是OS X的套件(包)管理器,我們可以通過它獲取並且安裝很多元件 安裝方式:       ruby

環境配置React Native 開發環境配置 For Android

React Native 是FaceBook開源的一個專案,FaceBook希望可以用寫 Web App 的方式去寫 Native App。它可以讓我們用JS和React來開發應用,使用React Native可以通吃Android 和 IOS ,以及We

Windows下React-Native開發環境配置

     1、一開始是在npm安裝時出現“‘node’”不是內部命令。。。是nodejs沒有安裝成功,雖然安裝過程會自動寫入環境變數,但是還是要在path後加入nodejs的安裝路徑,我的是"C:/Develope/nodejs"     接著在命令視窗輸入 node 

在window下搭建react-native開發環境配置,並通過react-native-cli生成一個專案執行

安裝些基本軟體,自行找教程,記得配置下環境變數 安裝python2 安裝jdk node、yarn 模擬器Genymotion傳送門 安裝android studio 然後看著教程將SDK裝好傳

React Native 開發環境配置---ubuntu14 linux

小白用的是ubuntu 14.4 64位的,說一下開發之前的配置。 1 安裝node環境 這個可以隨便搜一下很多, 官網下載 配置環境變數 最後一定要驗證是否成功 終端輸入 node -v 看看是否出現

macreact Native android環境搭建

否則 編譯速度 方案 立即生效 cat blog ref spa 默認 1、參考 上一篇的博客文章 “mac 下 react Native ios環境搭建”,前面幾步都是必須的,只是,原生客戶端不一致 2、Android Studio的安裝 A:安裝JAVA

Windows搭建React Native開發環境

win 9.png 技術 src alt blog nat -1 bsp 成功部署 Windows搭建React Native開發環境

react-native 開發環境搭建

post 註意 令行 圖片 技術 usb bubuko http androi 首先安裝jdk。本教程基於jdk1.8,安裝時有一點要特別註意:jdk和jre必須裝到不同目錄下,否則初始化react-native項目時大概率報tools.jar not found ex

react-native-開發環境搭建

Go roi ids ati ios studio androi 工具 sta 一、開發環境搭建-windows平臺; 安裝 node 安裝 react native npm install -g react-native-cli 安裝Android開發工具Androi

win10的react native 開發環境搭建,使用Android模擬器

1.開啟cmd的管理員模式,win+X,選擇命令提示符(管理員)即可,執行如下命令: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy

手把手教你搭建React Native 開發環境 - ios篇 (React [email&#

由於之前我是h5的,沒接觸過ios和安卓, 也不瞭解xcode配置,所以 建議學reace-native之前還是先去了解一下ios和安卓開發環境搭建等問題。 環境下載及配置 nodejs:https://nodejs.org/en/download/ 設定淘寶映象 $ npm con