React—native+Android环境搭建和开发配置(Mac)
来源:互联网 发布:成都市行知小学怎么样 编辑:程序博客网 时间:2024/06/05 12:44
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教程
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
- React—native+Android环境搭建和开发配置(Mac)
- React—native+Android环境搭建和开发配置(Mac)
- react-native —— 在Mac上搭建React Native Android开发环境
- react-native —— 在Mac上搭建React Native Android开发环境
- react-native —— 在Mac上搭建React Native Android开发环境
- React Native Mac上搭建Android开发环境
- Mac上搭建React Native Android开发环境并运行
- React Native环境搭建 (android/mac环境)
- Mac下搭建react native开发环境
- MAC搭建React Native开发环境
- 【React Native】Mac端iOS和Android开发环境搭建完全教程
- React native 开发环境的搭建 — mac平台
- MAC 配置React Native开发环境
- Mac配置 React Native开发环境
- mac 配置React Native的开发环境
- 在Mac上搭建React Native开发环境(iOS && Android)
- React Native Mac环境搭建
- 搭建react native mac 环境
- 算法导论第十三章 红黑树
- [实验室]2016.7.27
- yarn-site.xml配置参数
- HDU-5754 Life Winner Bo (博弈论)
- NSString, char*, NSData类型之间的转换
- React—native+Android环境搭建和开发配置(Mac)
- 【SSH快速进阶】——Spring AOP原理及其实现
- meta标签中的http-equiv属性介绍
- **NGINX简单access日志查询分析**
- ACdream 1216 Beautiful People 最长上升子序列变形
- html5中canvas贝塞尔曲线绘制菊花
- test
- 通过mvn dependency:tree 查看依赖树,解决依赖jar冲突问题
- 网编基础(3)(上传文件数据到微博)