React—native+Android环境搭建和开发配置(Mac)
一.必须的软件安装
1.Homebrew安装,Homebrew,Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。
命令行安装:
/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
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
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破解)
其他破解参考:
如果是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.下载
官网下载(最新);点击打开链接
注意:网盘下载时1.15G是含SDK Tools,270M的不含SDK Tools。
2.安装和HelloWorld教程
http://www.jb51.cc/article/p-dhcgioca-a.html
五:创建项目和真机调试
(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隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool false