React Native环境及项目配置搭建

2023-11-01

安装RN环境卡了我好久,在网上搜了很多都不全遇到很多坎儿,时至今日我终于装好了,打算写一个详细过程造福大众,也算是对自己总结更深层的记忆。

1.首先看官网 React

注意要点:必须要有node,javaJDK和AndroidStudio。

再分别看这三者的条件: (1)node必须在14以上,可以去 node官网下载,我这里用的是NVM。NVM教程

搞好之后检查:cmd执行命令:


    
    
  1. node -v
  2. 复制代码

无误之后,这一步完成。

(2)JavaJDK必须在11版本, Temurin 或者Oracle JDK

下载完成之后,安装一路回车就可以。同样搞好之后检查:cmd命令行执行:

javac -version

    
    

无误之后,这一步完成。

(3)安装 Android Studio ,将近1G的安装包,这一步某些地方会出错需要注意。

下载之后安装,C盘小的朋友主要换位置,后面还要装JDK(这玩意也很大)。

2.配置环境。

(1)首先是AndroidStudio里面的配置,很容易恼火,我就是,所以看图。

在这里打开它:可能会有点慢,因为他太大了。

点击:配置JDK。全是英文我也是碰的头破血流搞出来的很烦人。

点击:选择储存位置。(这个路径选好之后要复制一下,一会要用)

再次进来就是这样了:接下来就是安装JDK: 看关键字。

看图:

这些勾选之后点击勾选OK就开始下载了,看图:

这些搞好之后就可以关了这玩意了,烦人。

(2)环境变量配置。控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录。

看图:

两个是一样的,在哪配都行,只不过系统权限大一点。

新建:


    
    
  1. ANDROID_HOME
  2. E:\AndroidSDKComponentsSetup //这个路径按自己的

记得点击确定。

然后点击:path

新建四个,一次填写。


    
    
  1. %ANDROID_SDK_ROOT%\platform-tools
  2. %ANDROID_SDK_ROOT%\emulator
  3. %ANDROID_SDK_ROOT%\tools
  4. %ANDROID_SDK_ROOT%\tools\bin

一路点击确定就完成了。

同样搞好之后检查,cmd命令:两个都可以


    
    
  1. set path
  2. set ANDROID_HOME

这就是成功了。

3.创建项目。

注意: 接下来操作用如果npm或npx在默认官方仓库中下载第三方模块速度慢或者报错请修改下载仓库,详细npm换源方法可以看我的NPM换源


    
    
  1. npm config get registry //查看现在的仓库地址
  2. npm config set registry https: //registry.npm.taobao.org //换为淘宝
  3. npm config set registry https: //mirrors.huaweicloud.com/repository/npm //换位华为

在想要创建的文件夹下执行命令:cmd

npx react-native init AwesomeProject //AwesomeProject项目包名称

    
    

注意这几条注意事项,否则不能创建成功!

这个时候它还只是一个js包,我们需要把它转为APK,执行命令:


    
    
  1. cd victory //进入项目包
  2. npx react- native run-android //生成APK
  3. 复制代码

这样就是完成了,同样检查。打开项目包按路径查,看到个这个APK,就是成功了。

中间报了几个错,不重要

第一个是打开模拟器失败,第二个是安装APK失败。

至此,项目以及生成成功,可以用真机或者模拟机运行。夜神模拟器

安装好之后,把项目安装上来。直接拖拽进来就好了。

点击打开:

第一行报错:没有启动服务器,这是时候我们启动项目就好啦。

执行命令:

npm start

    
    

接下来让项目和夜神同步就好啦,链接本地电脑的ip和端口号,看图。

执行命令获取本电脑ip:

ipconfig

    
    

查看端口,这里我用的是XAMPP查看端口。

找到这两项之后,回到夜神。

点击:

重启夜神:

这样就好啦! 打开项目包编辑一下:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native环境及项目配置搭建 的相关文章

随机推荐

  • Linux SVN 搭建(YUM)安装

    原文地址 http www centoscn com CentosServer ftp 2014 0202 2409 html 安装说明 系统环境 CentOS 6 2 安装方式 yum install 源码安装容易产生版本兼容的问题 安装
  • 正则验证

    一 校验数字的表达式 数字 0 9 n位的数字 d 2 至少n位的数字 d n m n位的数字 d m n 零和非零开头的数字 0 1 9 0 9 非零开头的最多带两位小数的数字 1 9 0 9 0 9 1 2 带1 2位小数的正数或负数
  • 遍历dataframe中的某列,找出含有空格的元素

    工作上需要处理一个数据 把一个较大数据中的姓名列和账号列全部遍历一遍 然后看是否数据里面含有空格 一开始想法是用for循环 一行一行遍历df数据 这个方法效率太慢 搜索一下 有个博主发现了一个map函数 太厉害了 我直接用了 准备先贴我的代
  • IDEA中POM 项目parent中的dependencyManagement中的依赖版本号报红

    现象 IDEA中作为管理依赖的parent项目的pom文件中 在dependencyManagement中的dependency 如果指定的版本在本地仓库不存在 并且在子项目中也未引用的时候 会报红 疑惑 只是引用了很常见的依赖 并且版本官
  • 如何编写一个含有抄底信号的副图指标

    如果你作为通达信软件源代码的程序维护员 如何编写一个含有抄底提示的副图指标 请看下面的的示例教程 python语言 python 导入所需的库 import talib 计算移动平均线 def moving average data per
  • 【哈佛积极心理学笔记】第6讲 乐观主义

    第6讲 乐观主义 How can we create consciously and subconsciously a positive environment where we actually can take out the most
  • 小白学习一周 Linux命令

    文件系统管理相关命令 clear 清屏 pwd 打印当前工作目录 tmp 打开文件夹 cd 改变当前工作目录 mkdir 创建一个新文件夹 mkdir 在根目录下创建一个新文件夹 mkdir p 套娃创建文件夹 rmdir 删除当前目录下的
  • 图像数据处理 pytorch

    coding utf 8 Transfer Learning Tutorial Author Sasank Chilamkurthy
  • 双非计算机学硕报录比竟然有28:1?深圳大学20考研居然如此爆炸!

    深圳大学是一所双非大学 计算机学科评估B 软件工程学科评估没有 由于计算机实力在双非中很强 而且地处广东深圳 是信息行业和互联网行业比较发达的地区 因此深圳大学很受考生欢迎 但是深圳大学也很难考 深圳大学基本所有计算机相关专业都考408 这
  • 【Git】(一)基本操作

    读完本文后 您会了解 1 如何在本地配置GIT环境 2 环境配置成功后 如何从远端下载一个已有仓库到本地 1 配置全局用户名 邮箱 git config global user name username git config global
  • LeetCode 0198. House Robber

    问题简析 作为职业小偷 我要去打家劫舍 但是注意如果两家相邻房子在同一夜被打劫了 则会触发警报 现在给定一个非负整数构成的数列 代表连续的若干房屋中的财产数量 计算一晚上最多能偷多少钱 例如 nums 1 2 3 1 最大值为1 3 4 n
  • 论文End To End speech里一种seq2seq

    在End To End speech里介绍了一种更好的seq2seq的模型 效果我没有实际比较过 但是思路值得学习 接下来分享下 我的理解 虽然这篇论文讲的是Text To speech 但是主要模型架构使用的是seq2seq 主要的改进也
  • 高效真实的云渲染算法

    高效真实的云渲染算法 转 原文链接 http www cnblogs com effulgent archive 2008 10 06 1305029 html 原文 Realistic and Fast Cloud Rendering N
  • 飞书与IAI国际广告奖,协同实现国内营销史上的创新“云终审”

    防疫时期 线下营销活动暂停或无限延期 转型线上迫在眉睫 而想要高效地进行线上远程办公 一套实用而全面的线上协同工具不可或缺 今天的主角 IAI国际广告奖 是由中国传媒大学广告学院与IAI国际广告研究所联合主办的中国大型广告作品案例评选活动
  • 随笔:MySQL 查询事务状态字段说明

    今天一个朋友想查看一下的MySQL层事务提交状态经历的过程 比如我们常说的prapare flush sync commit 几个阶段 但是找了一下发现视乎没有视图可以看到一共看了3个地方 information schema INNODB
  • Elasticsearch实战(十二)---搜索推荐 match_phrase_prefix及fuzzy错误拼写模糊查询

    Elasticsearch实战 搜索推荐 match phrase prefix 文章目录 Elasticsearch实战 搜索推荐 match phrase prefix 1 搜索推荐场景 1 1 准备数据 2 搜索推荐实现 2 1 ma
  • nginx报404 not found错误解决

    一般报404错误都是因为nginx做了伪静态 去除了框架的index php 访问某域名时 去掉index php目录时达到效果一样 如 www test1 index php test2跟www test1 test2效果一致 在vhos
  • stm32flash碰到hex文件出错,读取超慢, 占用内存超多的问题解决

    这个问题是因为sdcc生成的hex的每行的地址并不是排序的好的 有些高的地址在前面 低的地址在后面 这样的话 stm32flash这个hex c并不能处理这个情况 里面有一个逻辑是用来填补0xff的 当后面的地址比前面大 一减得负数 但是变
  • TCP协议详解(三次握手,传输数据,四次挥手)

    首先来了解一下什么是TCP 传输控制协议 简单点来讲TCP它是一种网络通信协议 旨在通过internet发送数据包 TCP是OSI层中的传输层协议 第四层 用于通过传输和确保通过支持网络和internet传递消息来在远程计算机之间创建连接
  • React Native环境及项目配置搭建

    安装RN环境卡了我好久 在网上搜了很多都不全遇到很多坎儿 时至今日我终于装好了 打算写一个详细过程造福大众 也算是对自己总结更深层的记忆 1 首先看官网 React 注意要点 必须要有node javaJDK和AndroidStudio 再