设为首页 收藏本站
查看: 1270|回复: 0

[经验分享] 一.React-Native学习之Window环境下搭建环境配置

[复制链接]

尚未签到

发表于 2017-2-25 08:10:00 | 显示全部楼层 |阅读模式
  一.安装JDK
  1.从Java官网下载JDK并安装。 也可以从百度云下载x64版本
        2.安装成功可以用java -version查看版本信息
  3. 配置环境变量
  JAVA_HOME=C:\Program Files\Java\jdk1.8.0_45
  Path+=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
  CLASSPATH+=%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
  JAVA_HOME变量
DSC0000.png

  Path变量
DSC0001.png

  CLASSPATH变量
DSC0002.png

  二.安装Android SDK
  推进安装Android Studio
  1.官网链接AndroidDevTools。 百度云
  2.安装完成后在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
DSC0003.png

  3.在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。(必须是这个版本)
  . DSC0004.png
  4.配置ANDROID_HOME环境变量
       ANDROID_HOME= C:\Users\Administrator\AppData\Local\Android\sdk
DSC0005.png

  三.安装NodeJS
     1.从官网下载node.js的官方4.1版本或更高版本。百度云
  2.可使用node -v的命令来测试NodeJS是否安装成功
四、安装git
  1.官网 或百度云下载git安装包
  2.配置环境变量
  GIT_HOME=C:\Program Files\Git
DSC0006.png

  五.安装Python
  从官网下载并安装python 2.7.x(3.x版本不行) 百度云
  六.安装react-native
  1.安装react-native命令行工具react-native-cli,git配置完成后可以clone React-native-cli了
  1)   在命令行中进入你希望RN安装的目录
  2)   输入git clone https://github.com/facebook/react-native.git
DSC0007.png

  3)   进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g
DSC0008.png

  安装好之后,可以命令行下就有react-native命令了
  2.创建React-Native项目
  进入你希望创建项目的目录后,输入react-native init AwesomeProject,等待一段时间(较慢)
                 
DSC0009.png

  目录结构:
DSC00010.png

  3.运行package
  1) 在命令行中进入项目目录,输入react-native start,等待一段时间:
DSC00011.png

  然后在浏览器中输入http://localhost:8081/index.android.bundle?platform=android,如果可以访问就表示服务端启动了
DSC00012.png

  4.运行项目
   刚刚运行package的命令行不要关闭,重新启动一个新的命令行 ,进入项目目录,输入react-native run-android
        DSC00013.png
  接下来可能会出错
DSC00014.png

  解决方案:
  1)更改gradle为1.2.3
DSC00015.png

  2)在安卓机中--关于手机---长按MIUI版本 ,在弹出层中开启开发中模式
DSC00016.jpg

  3)在开发中选项中开启usb调试  并禁用"启用MIUI优化",重启手机。
DSC00017.jpg

  接下来打开安装好的app,会白屏,这是需要找到并打开悬浮窗权限。
  教程http://jingyan.baidu.com/article/f25ef25466c0fc482d1b824d.html
  然后重新打开app,报错
DSC00018.png

  这时候摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口
DSC00019.png DSC00020.jpg DSC00021.jpg

  再次摇一摇手机,选择Reload ,程序就运行起来,出现Welcome to React Native!
DSC00022.png

  至此,就可以尽情的安卓code了!

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346799-1-1.html 上篇帖子: Node.js des加密 下篇帖子: 使用jhipster搭建微服务--简单demo
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表