在Mac 上配置 React Native环境相关的基础知识

来源:互联网 发布:linux下的常用命令 编辑:程序博客网 时间:2024/05/20 00:50

1、Homebrew——》OS X 不可或缺的套件管理器;官网:http://brew.sh/index_zh-cn.html


2、nvm是Node Version Manager的缩写,它是nodejs版本管理工具。可以在多个nodejs版本中进行切换,降低了升级nodejs时的成本。即Node Version Manager - Simple bash script to manage multiple active node.js versions。

安装向导地址:https://github.com/creationix/nvm#installation

nvm安装向导提供了curl和wget两种安装脚本,

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

在使用这两种方式之前,我们可以采用brew install curl或者brew install wget来确保已经安装curl或者wget。我采用的是wget方式。使用curl方式或者利用git下载并手动安装的话,应该还需要做一个步骤

即(

配置一下环境变量到.bash_profile文件中

Add these lines to your ~/.bashrc, ~/.profile, or ~/.zshrc file to have it automatically sourced upon login:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm


3、npm是Node Package Manager的缩写,npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
如果你熟悉ruby的gem,Python的pypi、setuptools,PHP的pear,那么你就知道NPM的作用是什么了。
Nodejs自身提供了基本的模块,但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是,Nodejs库和框架为我们提供了帮助,让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦,有了NPM,可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。

官方网站:https://www.npmjs.com,官方文档:https://docs.npmjs.com

淘宝的NPM镜像:http://npm.taobao.org

The npm command-line tool is bundled with Node.js. If you have it installed, then you already have npm too. If not, go download Node.js.

Node comes with npm installed so you should have a version of npm. However, npm gets updated more frequently than Node does, so you'll want to make sure it's the latest version.
执行更新的命令:sudo npm install npm -g
Test: Run npm -v. The version should be higher than 2.1.8.

如果安装了Node.js,那么npm和npm命令行工具也就已经被安装完成了。但是npm比Node.js更新频繁,所以可以自行使用命令更新npm。

这篇文章提到,如果现在采用是Node5.0版本的版本,官网是推荐安装npm 2,该版本比npm 3速度更加快。在安装完Node之后,命令行运行npm install  -g npm@2安装即可。但是这个观点我没有在官网找到,所以我没做这一步。


4、另外补充一下gems。

RubyGems(简称 gems)是一个用于对 Ruby组件进行打包的 Ruby 打包系统。 它提供一个分发 Ruby 程序和库的标准格式,还提供一个管理程序包安装的工具。
RubyGems的功能类似于Linux下的apt-get。使用它可以方便第从远程服务器下载并安装Rails。
打开命令行窗口(cmd),输入执行命令 gem install rails --remote 或 gem install rails--include-dependencies。

官网地址:https://rubygems.org


5、安装Node.js 4.0或更高版本

可以使用homebrew或者nvm安装都可以,使用homebrew安装的命令为brew install node,使用nvm安装的命令为nvm install node && nvm alias default node。nvm使用这个命令将会默认安装最新版本的Node.js并且设置好命令行的环境变量,这样你可以输入node命令来启动Node.js环境。nvm使你可以同时安装多个版本的Node.js,并且在这些版本之间轻松切换。

注:如果并不使用Node.js开发网站,只是用于React Native的开发,那么安装homebrew,然后直接使用brew install node安装即可,不必按照nvm的安装步骤。


6、Watchman。推荐安装watchman,否则可能会遇到一个Node.js监视文件系统的BUG。(watchmam用于监控bug文件,并且可以触发指定的操作)

We recommend installing watchman, otherwise you might hit a node file watching bug。

Watchman使用Homebrew安装,命令行为brew install watchman。

网址:https://facebook.github.io/watchman/docs/install.html


7、flow。

如果希望使用flow来为js代码加上类型检查,那么在命令行中输入brew install flow来安装flow。(新手可以略过这一步骤)

flow是一个 JavaScript 的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误,官网:http://www.flowtype.org。


8、定期运行brew update && brew upgrade来保持使用homebrew安装的几个程序为最新版本。


9、使用命令行运行npm install -g react-native-cli命令来安装React Native。


10、创建React Native项目。使用命令行react-native init AwesomeProject(这里假设新项目的名称为AwesomeProject)。会生成一个项目目录。里面包含iOS和Android项目的初始状态。

android和ios目录里分别是一个Android  Studio和Xcode创建的项目。index.android.js和index.ios.js文件为Android和IOS的空壳应用文件。node_modules文件夹用来存放和管理Node.js的npm包,也包含React Native框架文件。


由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦(很慢或者直接不成功)。所以可以将npm仓库源替换为国内镜像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
另外,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。

注:这一步并不是必须的,需要视当前的网络情况而定,有时候其实不替换也还是蛮快的。


11、运行iOS应用:①$ cd AwesomeProject

②用Xcode打开ios/AwesomeProject.xcodeproj并点击Run按钮。

③使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。

④在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

运行Android项目:①$ cd AwesomeProject
       ②$ react-native run-android
       ③使用你喜欢的文本编辑器打开index.android.js并随便改上几行
       ④按Menu键(通常是F2,在Genymotion模拟器中是⌘+M)然后选择 Reload JS 就可以看到你的最新修改。
       ⑤在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

注:运行Android项目的前提是Android SDK已安装,并且有Android模拟器或者真机(真机还需要一些额外配置,见官网)


12、为已有的React Native工程添加Android支持
如果已经有了一个只有iOS版本的React Native工程,并且希望添加Android支持,你需要在工程目录下运行以下命令:
打开package.json文件,在dependencies项中找到react-native,并将其后的版本号修改为最新版本。
$ npm install
$ react-native android



参考文献:

React Native官网介绍:http://facebook.github.io/react-native/docs/getting-started.html

React Native中文网:http://reactnative.cn/docs/0.23/getting-started.html#content

江清清的技术专栏:http://www.lcode.org/【react-native开发】react-native-for-android环境配置以及第一个实例/




1 0
原创粉丝点击