逻辑性最强的React Native环境搭建与调试

ReactNative系列文章:

1.《逻辑性最强的React Native环境搭建与调试》

2.《ReactNative开发工具有这一篇足矣》

 

正文

React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用,就足矣证明其实力!

本文分为以下几个部分:

  一、环境搭建;

  二、APP调试与运行;

  三、扩展知识;

一、环境搭建

系统配置:Win10

模拟器:Visual Studio Emulator for Android(可以脱离VS单独安装,也可以使用其他其他模拟器或真机调试)

环境搭建分为两个部分:

1、Android开发环境搭建(之前已经设置过,可以跳过此步骤);

2、RN开发环境搭建;

1、Android开发环境搭建;

①、安装JDK,具体步骤不详述,可以使用Java -version来检测一下;

②、安装Android SDK,需要设置环境变量:ANDROID_HOME => Android SDK Manage安装位置,ex:ANDROID_HOME => E:\android\sdk;

③、设置Android SDK,需安装已下项:

  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository
  • Local Maven repository for Support Libraries 

如图:

2、RN开发环境搭建:

①、安装node环境,https://nodejs.org/en/点击下载V6.xxx安装即可;

②、安装Git,https://git-for-windows.github.io/点击下载安装即可;

③、安装RN脚手架:npm i react-native-cli -g

到此为止环境已经搭建完成。

二、APP调试与运行

1、创建项目

  react-native init demo1

2、安装依赖包

  进入demo1根目录执行:npm i

3、启动服务器

  react-native start

  等一段时间,用浏览器访问http://localhost:8081/index.android.bundle?platform=android可以访问,即启动完成,启动之后不能关闭;

4、安装app

  react-native run-android

  在输入此命令前,要先打开模拟器,或连接真机,第一次启动非常慢,需要下载gradle,也可以手动下载gradle安装。

  以下为扩展内容(可忽略):

    如果安装失败,或者不想等太长时间,点击:

    https://services.gradle.org/distributions/下载,放入C:\Users\用户名\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv

    如果手动安装需要执行:react-native run-android重新启动;

5、运行调试app

  本人用的是Visual Studio Emulator for Android(模拟器)运行的,真机或其他模拟器相同,第一次运行会出现错误,如图:

  

  解决方案:设置IP和端口,具体操作,摇一摇手机,Visual Studio Emulator for Android(模拟器)如图:

  

  如上图,点击更多工具 => 加速计 => 点击播放,模拟摇一摇,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口,这个时候返回是空白,再次点击摇一摇,选择Reload JS程序就显示出来了,如图:

  

 

三、扩展知识(重要):每次修改完程序都要摇一摇Reload很麻烦,这个时候有一个很方便的做法开启热加载,改动完之后,即可在app自动更新,设置如图:

  

设置完之后,就可以愉快的编写代码了,所编即所得的及时反馈,着实好用,也大大节省了调试成本!

 

更多详情,请移驾:http://reactnative.cn/docs/0.45/getting-started.html

 

常见问题

问题1:小米手机不能识别设备,安装不了调试包?

解决方案:设置 =》 开发者选项 =》 关闭“启动MIUI优化”

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547103.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自绘热点按钮

自绘热点按钮 一、1.在VS2010中新建MFC对话框工程,命名“Test”。 2.删除对话框上所有控件,然后在对话框上添加一个按钮,一个组合框,一个编辑框,更改按钮ID为IDC_TRANSFORM_BTN,更改编辑框ID为IDC_EDIT2。…

YOLOv5在建筑工地中安全帽佩戴检测的应用(已开源+数据集)

前言 Amusi 发现一个很棒的开源项目,利用YOLOv5进行目标检测的"落地化"应用:安全帽佩戴检测。 该项目使用了YOLOv5s、YOLOv5m、YOLOv5l来训练安全帽佩戴检测数据集,代码和权重均已开源!安全帽佩戴检测数据集也是开源的…

centos上安装adobe flash

1、下载adobe yum源rpm包并安装rpm -ivh http://linuxdownload.adobe.com/adobe-release/adobe-release-x86_64-1.0-1.noarch.rpmrpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-adobe-linux2、通过yum命令安装adobe flashyum install flash-plugin nspluginwrapper alsa-plugins-…

linux运行可执行文件,通过c语言调用java的main方法

前言&#xff1a;以前一直在做Android开发&#xff0c;在某本书上看过一句话“Android上面不只有App类的程序可以运行&#xff0c;能在linux下运行的程序&#xff0c;也可以在Android上面运行” 一.编写C语言部分代码 1.定义java.h头文件 #include <jni.h>#ifndef _JAV…

MFC串口通信设置及发送、中断接收程序

前一段做了个串口通信小软件&#xff0c;就是现实利用上位机软件通过串口通信对下位机&#xff08;单片机&#xff09;通信&#xff0c;校时LED点阵万年历&#xff0c;省去按键调节的麻烦&#xff0c;方便校时&#xff0c;省时省力。 为右击 串口通信控件&#xff0c;添加关联…

ReactNative开发工具有这一篇足矣

ReactNative系列文章&#xff1a; 1.《逻辑性最强的React Native环境搭建与调试》 2.《ReactNative开发工具有这一篇足矣》 正文 React Native&#xff08;以下简称RN&#xff09;开发工具的文章很多&#xff0c;几乎千篇一律都是Copy的&#xff08;一毛一样&#xff09;&a…

【K8S】Docker向私有仓库拉取/推送镜像报错(http: server gave HTTP response to HTTPS client)

这里&#xff0c;我们搭建的Harbor仓库的地址为 http://192.168.175.101:1180。 报错信息如下所示。 [rootbinghe101 ~]# docker login 192.168.175.101:1180 Username: binghe Password: Error response from daemon: Get https://192.168.175.101:1180/v2/: http: server …

MFC串口通信串口指示灯的实现

前一段做了个串口通信小软件&#xff0c;当打开串口时串口指示灯亮&#xff0c;关闭串口时串口指示灯灭&#xff0c;实现方法如下&#xff1a; 1.在资源视图中&#xff0c;添加两个图标&#xff0c;分别为串口指示灯灭IDI_ICON1&#xff0c;串口指示灯亮IDI_ICON2。 2.在串口通…

07-Windows Server 2012 R2 会话远程桌面-标准部署-RD授权

Windows Server 2012 R2 会话远程桌面-标准部署-RD授权马博峰当完成所有的部署后&#xff0c;在实际操作中没有任何问题&#xff0c;并完成所有的测试&#xff0c;在所有工作的最后一步就是需要安装RD授权服务器&#xff0c;远程桌面授权&#xff08;RD 授权&#xff09;以前称…

解决React Native unable to load script from assets index.android.bundle on windows

React Native运行的时候&#xff0c;经常碰到React Native unable to load script from assets index.android.bundle on windows解决方法有2种&#xff1a; 方法一&#xff1a;设置IP和端口 具体步骤&#xff1a;报错页面晃动手机&#xff0c;显示菜单 》 点击Dev Settings …

CentOS 安装go client调用Kubernetes API

CentOS 安装 Go环境并配置goproxy wget https://dl.google.com/go/go1.14.4.linux-amd64.tar.gz tar -xzvf go1.14.4.linux-amd64.tar.gz -C /usr/local/ mkdir -p /home/gopath cat >> /etc/profile <<EOF export GOROOT/usr/local/go export GOPATH/home/gopath…

VS2010中使用sprintf出现warning C4997: 'sprintf': This function or variable may be unsafe.

使用VS2010编译时。会出现以下警告。 warning C4997: sprintf: This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details. c:\program files (x86)\microsoft visual …

list使用

1、将两个list合并成一个list&#xff0c;可以用addAll()方法。2、一个list1嵌套list&#xff0c;可以list<bean> listnew ArrayList<bean>();ArrayList<list> list1new ArrayList<list>();lst1.add(list);转载于:https://blog.51cto.com/7533390/1341…

React Native App设置amp;Android版发布

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load script from assets index.android.bundle on windows》 《React Native App设置&Android版发布》 一、设置APP信息 1.设置包名…

Kubernetes 1.20 报错:“open /run/flannel/subnet.env: no such file or directory“

pod 一直处于 ContainerCreating&#xff0c;查看 pod 详情&#xff1a; kubectl describe pod [pod name]提示错误信息&#xff1a; ... NetworkPlugin cni failed to set up pod "mysql-mb6t7_default" network: open /run/flannel/subnet.env: no such file or …

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load script from assets index.android.bundle on windows》 《React Native App设置&Android版发布》 《史上最易懂——ReactN…

tomcat 系统服务 outofmemory

TOMCAT内存溢出outofmemory的问题&#xff1a; http://hi.baidu.com/mefeng47/item/3b247af74ce4e24e922af2e5 注&#xff1a;双击tomcat6w.exe打开tomcat monitor 1.OutOfMemoryError: Java heap space 堆溢出 VM参数&#xff1a;-Xms256m -Xmx512m 2.OutOfMemoryError: PermG…

Jeston TX2安装Ubuntu系统

准备材料&#xff1a;一台装有Ubuntu系统的电脑&#xff0c;联网的路由器&#xff0c;网线&#xff08;这里用了两根&#xff09;&#xff0c;一根普通安卓手机充电线 我的电脑系统是Ubuntu16.04&#xff0c;尝试了在Ubuntu18.01上面运行下面的命令&#xff0c;不能运行&#x…

VS2010 error C299: “Font”:“struct”类型重定义

在VS2010里添加了在VC6.0里形成的OFFICE库文件的类 excel9.h,excel9.cpp&#xff0c;就是我在VC6里做操作OFFICE的表格时候添加的库文件&#xff0c;然后把它们&#xff08; excel9.h,excel9.cpp&#xff09;加载VS2010里&#xff0c;然后就报很多的错误。下面的错误只是一部分…

ReactNative环境搭建扩展篇——安装后报错解决方案

之前一篇写了《逻辑性最强的React Native环境搭建与调试》说了RN的安装&#xff0c;今天在这里做一个复盘&#xff0c;让我们能够更直观更深入的了解React Native&#xff08;以下简称RN&#xff09;,这一篇重点来说的就是&#xff0c;安装之后必报的2个错误的解决方案。 更新…