window下从搭建,运行到调试react native 项目

2019-07-13 admin

**

一,安装基本环境依赖

** Node 的版本必须大于等于 10 Python 的版本必须为 2.x(不支持 3.x) JDK 的版本必须是 1.8 个人版本 图片描述 图片描述 图片描述 javase记得配置环境变量

二.安装Android studio

此文档只用到Android studio的adb 下载Android studio一路回车… 安装好之后配置sdk的环境变量 本人的sdk路径是 C:UsersxxxxAppDataLocalAndroidSdkplatform-tools 图片描述

SDK授权

C:UsersxxxAppDataLocalAndroidSdktoolsbin 图片描述

打开cmd 输入一下命令 一路Y加回车 sdkmanager --licenses

图片描述

由于我已经授权过了所以显示的是已经授权过的页面

三.开始建立react native项目

1.安装Yarn和react-native-cli工具 npm install -g yarn react-native-cli 图片描述 运气不错一步到位

2.初始化项目 react-native init test

图片描述

安装完成

图片描述

打开项目=》推荐用vscode 安装相关依赖 react native tools等

图片描述

四,启动项目

1.下载模拟器 随便下一个模拟器 本人用的是雷电模拟器(因为对比了其他的个人觉得雷电模拟器体验不错)

图片描述

2.启动雷电模拟器

图片描述

3.使用adb 连接设备 adb start-server

图片描述

4.vscode启动项目 react-native run-android

图片描述

成功启动

四.调试项目

1.点击模拟器摇一摇功能

图片描述

出现这么一坨 打开Dev Settings => Debug server host && port for device

图片描述 图片描述

查看电脑ip 打开cmd输入 ipconfig

图片描述

在模拟器debug上输入ip+默认端口8081

图片描述

退出再次摇一摇

图片描述

选择两个其中一个 本人选择下面的不生效 所以选择了上面的

回去项目中修改App.js代码 <View>

 <Text>Hello world!</Text>

</View>

保存后模拟器自动更新 图片描述 从搭建,运行到调试react native 项目到此完毕

[转载]原文链接:https://segmentfault.com/a/1190000019750188

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69635.html

文章标题:window下从搭建,运行到调试react native 项目

相关文章
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
从 Node.js 分裂出 Io.js 事件看开源软件谁做主
Node.js 作为服务器编程语言的后起之秀,常用来构建和运行 Web 应用,近日却爆出其社区出现分裂。由于对官方运营商 Joyent 公司在 Node.js 管理上的长期不满,多位核心开发者另立门户,创建了分支 Io.js。从 GitHu...
2015-11-12
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: &lt;link rel=&quot;stylesheet&quot; href=&quot;css&#x2F;bootstrap.min.css&quot; type=&quot;text&#x2F;css&quot;&#x2...
2017-02-22
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
Windows Server 2003将于7月14日停服
腾讯数码讯(文心)据PCWorld网站报道,微软的Windows Server 2003操作系统将很快重蹈Windows XP停服的覆辙,对于迟迟没有升级到新版本服务器操作系统的IT主管来说,这确实是个坏消息。 微软将于7月14日叫停对W...
2015-11-12
回到顶部