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的正确打开方式 ↓ ↓ ↓

这里写图片描述

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
3月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
46 0
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
53 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
40 3
|
3月前
|
开发框架 前端开发 JavaScript
react native是什么,怎么用
react native是什么,怎么用
44 0