开发者社区> code_xzh> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React Native之hellWord

简介: 初始化项目工程 进入自己的工作空间然后shift+鼠标右键打开命令行窗口执行如下命令创建RN工程HelloWorld: 然后使用Android Studio打开AVD Manager创建模拟器,在打开Android Studio的时候会提示创建Android项目,我们的目的只是为了打开模拟器,就随便创建一个项目就行了,创建之后就直接打开模拟器:
+关注继续查看

初始化项目工程


进入自己的工作空间然后shift+鼠标右键打开命令行窗口执行如下命令创建RN工程HelloWorld:

这里写图片描述

然后使用Android Studio打开AVD Manager创建模拟器,在打开Android Studio的时候会提示创建Android项目,我们的目的只是为了打开模拟器,就随便创建一个项目就行了,创建之后就直接打开模拟器:

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

几乎是一路next昂- -# , 应该没什么难度。

好,然后直接创建模拟器吧:

这里写图片描述

这里写图片描述

这里最好选择分辨率比自己电脑分辨率小的 ↓ ↓ ↓

这里写图片描述

选择自己通过SDK Manager下载的镜像版本

这里写图片描述

finish

这里写图片描述

这样就ok了

这里写图片描述

这里解释一下为什么不直接从下载的SDK目录里面直接通过AVD Manager.exe来创建?

这里写图片描述

因为之前试验过,直接从这里创建的话,(有时候)会导致x86硬件加速无法启动,模拟器就会很卡,还有就是如果通过这个exe直接创建模拟器的话,外观会很不好看的╮(╯▽╰)╭


然后进入打开刚刚创建的项目HelloWorld里面运行一下这个程序:

这里写图片描述

当电脑默默的饱受编译时大耗费资源后(其实就是电脑卡),可以看到这样的一幕:

这里写图片描述

咦?不是应该就ok了吗?怎么还这么喜庆了呢? 
这里写图片描述

原来还需要一步,把手机和RN的调试源给连接起来:

这里写图片描述

戳 ↓ ↓ ↓ 
这里写图片描述

填入调试电脑的ip和端口:

这里写图片描述

ip的简便获取方法:

这里写图片描述

端口号是在运行react-native run-android 之后出现的React packager窗口上提示的这个程序的端口号,默认是8081:

这里写图片描述

设置完后返回点击菜单键弹出菜单,里面点击reload js

这里写图片描述

。。。。这就正常了,这才是HelloWorld的正确打开方式 ↓ ↓ ↓

这里写图片描述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《React Native移动开发实战》出版啦
对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助。感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了。
1739 0
《React Native移动开发实战》一一2.2 Git版本控制工具
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1861 0
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1174 0
《React Native移动开发实战》一一1.2 React Native的特点
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2082 0
《React Native移动开发实战》一一1.1 看透React Native
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.1节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1959 0
《React Native移动开发实战》一一1.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
916 0
《React Native移动开发实战》一一3.9 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.9节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1369 0
《React Native移动开发实战》一一2.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1106 0
《React Native移动开发实战》一一2.4 React Native的Flexbox布局
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.4节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1042 0
+关注
code_xzh
对前端移动客户端技术比较擅长。著有《React Native移动开发实战》和《Kotlin入门与实战》和《Weex跨平台实战》,《React Native移动开发进阶》即将出版,正在努力完成《Flutter跨平台开发实战》
735
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载