React—native+Android环境搭建和开发配置（Mac）

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"[/code] 
译注：在Max OS X 10.11（El
Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

命令行输入:

sudo chown -R `whoami` /usr/local


Homebrew官网安装教程：点击打开链接

如果安装有问题还可以参考：点击打开链接（有Win和Mac的安装）

2.Node安装：使用Homebrew来安装Node.js.

React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本，完全满足要求。

命令行安装：

brew install node


安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下:

（1）npm config set registry "http://registry.npm.taobao.org"
（2）npm config listREact 可以查看配置


node.js官网：点击打开链接

3.React Native安装，

React Native的命令行工具(react-native-cli)，用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

命令行安装：

npm install -g react-native-cli


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

命令行输入:

sudo chown -R `whoami` /usr/local


英文官网点击打开链接

中文官网点击打开链接

4.Watchman 推荐安装的工具,Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

命令行安装：

brew install watchman


5.Java安装，（你可以直接下载安装，但是个人推荐使用brew安装）

命令行安装：

brew install Caskroom/versions/java6 这里安装的是Java6，可以使用相同的方式安装java7


二、Android环境变量配置

1.在终端中输入命令，进入用户目录。我的是/Users/panca/

$cd ~


2.然后输入命令，该命令的作用是如果不存在.bash_profile文件，则创建该文件

$touch .bash_profile


3.然后输入命令，该命令的作用是用文本编辑器TextEdit打开.bash_profile文件。如果你是第一次配置环境变量，则该文档应该是空的。

$open -e .bash_profile


4.复制下面的到文件中，主要修改sdk目录

export ANDROID_HOME=/Users/baidu/as/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools


5.测试（可能需要重启）

测试adb命令：$adb version 显示版本
测试android命令：$android  弹出Android Sdk Manager


win配置参考:点击打开链接

win配置完成之后，如果在之后，在运行adb时，提示adb不是内部或外部命令，

也不是可运行的程序或批量文件。大家就在环境变量，path中，直接附上

路径：D:\Android环境搭建相关文档\第二个 eclipse\adt-bundle-win

dows-x86_64-20140702\sdk\platform-tools

注意：tools目录运行android命令,platform-tools目录运行adb命令

三、WebStorm下载和配置

1.WebStorm官网地址： https://www.jetbrains.com/webstorm/

网盘20161的下载地址：http://pan.baidu.com/s/1o8COGkE

如果新版的有问题，可以百度下载11.0.3

2.WebStorm破解:选择Liscense server 然后输入http://www.iteblog.com/idea/key.php 就可以了(这里的破解不可能永远有效，如果无效，需要百度找Liscense server破解)

其他破解参考：

点击打开链接

点击打开链接

3.RN提示设置：点击打开链接 参考GitHub配置

如果是Mac 你要找~/Library/Preferences/WebStorm11/templates 注意~代表的用户目录，我的是/Users/panca，可能你的这个目录下不能找到Library，因为可能被隐藏了，直接打开终端输入open ~/Library/Preferences回车就可以到Preferences目录，查找WebStormXX目录，如果WebStormXX找不到templates，需要新建一个templates，但是如果你的WebStormXX也没有的话，你就先配置其他的吧，然后再去看，实在不行就只能重启一下。

4.字体颜色和样式设置：设置面板—>Editor —> Colors&Fonts

可以修改Font,JavaScript,CSS,HTML等的颜色和字体,如果你有配置Jar包也可以导入，File—>import Setting—>选择你的Jar包，点击OK，File—>Export Setting—>选择你的Jar包位置，点击OK导出

参考：点击打开链接

5.编码设置：设置面板—>Editor—>File Encoding设置编码

四、Android Studio下载与安装

官网点击打开链接

1.下载

官网下载(最新)；点击打开链接

百度网盘下载(2.1.1)：点击打开链接密码sx9h

注意：网盘下载时1.15G是含SDK Tools，270M的不含SDK Tools。

2.安装和HelloWorld教程

https://segmentfault.com/a/1190000002401964

五:创建项目和真机调试

(1).创建项目：react-native init AwesomeProject
(2).到项目文件夹（切换到package.json的位置）：cd AwesomeProject
(3).运行Android:react-native run-android


如果直接运行Android，会自动的去开启服务的，也可以手动的开启服务react-native start，服务开启之后在浏览器输入地址：http://localhost:8081/index.android.bundle?platform=android 

真机调试：

(4).查看手机是否连上:adb devices

(5).A5.0以上真机输入命令:adb reverse tcp:8081 tcp:8081
5.0以下真机输入命令：adb shell input keyevent 82


参考资料：点击打开链接

mac系统如何显示和隐藏文件

显示Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFiles -bool true
隐藏Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFiles -bool false