React—native+Android环境搭建和开发配置(Mac)

前端之家收集整理的这篇文章主要介绍了React—native+Android环境搭建和开发配置(Mac)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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 


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教程

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系统如何显示和隐藏文件

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

猜你在找的React相关文章