前后端分离的网站怎么做,网站关健词排名,图片素材的网站,seo页面排名优化目录
第一步#xff1a;打开React Native官方网站
第二步#xff1a;安装NVM与Node.js
一、安装NVM
二、使用NVM安装Node.js
三、NVM使用说明
四、环境变量配置
第三步#xff1a;安装JDK
一、JDK介绍
二、下载与安装JDK
三、环境配置
四、验证是否配置成功
第四…目录
第一步打开React Native官方网站
第二步安装NVM与Node.js
一、安装NVM
二、使用NVM安装Node.js
三、NVM使用说明
四、环境变量配置
第三步安装JDK
一、JDK介绍
二、下载与安装JDK
三、环境配置
四、验证是否配置成功
第四步安装Android Studio
一、基础安装
二、环境配置
第五步React Native
一、Yarn
二、创建新项目
三、准备 Android 设备
四、编译并运行 React Native 应用
五、修改项目 第一步打开React Native官方网站 第二步安装NVM与Node.js 为方便不同项目所需Node.js版本不同降低后续项目要给Node.js降级的麻烦先安装NVM管理Node.jsNVM可以很方便的切换版本。
一、安装NVM 1.下载NVM包Releases · coreybutler/nvm-windows · GitHub找到V1.1.11版本 2.在D盘尽量不要在C盘创建一个文件夹命名为NVM点击下载好的nvm-setup.exe将其下载在刚才建立的NVM文件夹中 然后直接点击install即可 3.安装完nvm后先不要着急安装node版本。 (1) 找到NVM安装路径 (2) 找到 setting.txt 文件 (3) 新增两行信息配置下载源将下述两行下载镜像新增在setting.txt文件中并保存
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/ 4.检查nvm是否安装完成 win R调用cmd输入nvm出现下面这一堆就表示安装成功了。 二、使用NVM安装Node.js 1.首先win R调用cmd输入“nvm list available”查询可插入版本号LST表示可插入稳定版本。【如未指定版本建议安装LTS下的版本】 2.安装指定node.js版本必须在14以上输入“nvm install 16.14.0” 3.输入“nvm use 16.17.0”切换Node.js版本 4.安装完成后可以分别输入命令行 “node -v” 和“npm -v”用以检验node.js以及对应npm是否安装成功 三、NVM使用说明 1.安装指定node.js版本
nvm install 指定Node.js版本号 2.删除指定node.js版本
nvm uninstall 指定Node.js版本号 3.查看当前已安装的node.js版本带*号的是正在使用的
nvm list
或者
nvm ls
四、环境变量配置
在进行环境配置之前设置文件权限避免之后报错。右键D盘Program Files文件下的nodejs文件属性-安全-编辑-允许-应用-确定 1.创建两个文件夹分别命名为“node_cache”、“node_global”用以保存从镜像源安装的东西 2.在cmd中分别输入如下两行代码无任何响应即为执行成功
npm config set prefix D:\Program Files\nodejs\node_global
npm config set cache D:\Program Files\nodejs\node_cache 3.设置环境变量 (1) 右键此电脑–属性–高级系统设置–高级–环境变量–系统变量添加变量名为NODE_PATH,变量值为npm安装路径D:\Program Files\nodejs\node_modules (2) 编辑用户变量的 path将默认的 C 盘下的 C:\Users\用户名\AppData\Roaming\npm 修改为 D:\Program Files\nodejs\node_global (3) 在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】随后一直点击【确定】 4验证环境配置是否成功。在命令提示符中输入如下代码
npm install express -g // -g代表全局安装
如果出现类似下图中的情况即为配置成功 援引的别人的图做到这一步忘记截图了WHF__ 如果出现类似如下的图也证明配置成功了。显示“changed 69 packages, and audited”表明npm已经全局安装了Express并且还对安装的包进行了安全审计。
命令执行完毕后npm会输出一个总结其中包括一些关于审计结果的信息。你可以查看这些信息以了解是否有任何高风险的安全问题被发现。
可以通过查看输出中的found 0 vulnerabilities来确定是否所有依赖项都是安全的。 至此NVM和Node.js配置完成 如果大家nvm切换node版本时显示切换成功实际没有切换成功大家可以参考下面这篇文章改正解决nvm切换node版本失败的终极办法亲测有效_node切换不成功怎么办-CSDN博客 第三步安装JDK
一、JDK介绍
较常用的四个JDK版本 1. JDK8Java8JDK1.8这个版本较为成熟稳定是JDK的一个重要长期支持版本(LTS)在生产环境中使用非常广泛 2. JDK11增加了大量实用的新特性包括新的 ZGC、云计算监控诊断、Http Client、支持Unicode 10.0.0等一共包含 17 个 JDK 增强提案 3. JDK17最新长期支持版本 具有switch 新增模式增加 Realed class 密封类Parallel GC 默认启用已经浮点运算更加严格 4. JDK18短期版本增加了服务提供者接口默认字符集为UTF-8
建议下载JDK17一下的版本
二、下载与安装JDK 1. 进入Oracle官网下载页面Java Downloads | Oracle 2. 这里我选择下载Java17页面往下滑动找到Java17 3. 下面开始安装JDK切记路径上不要有中文双击下载好的.exe文件 4. 路径设置为D盘在D盘下创建一个Java文件夹将JDK安装在此文件夹下路径可以设置成如下 然后点击下一步下载完成即可
三、环境配置 1. 右键点击【我的电脑】【属性】【高级系统设置】【环境变量】 2. 在系统变量下面新增一个变量变量名是JAVA_HOME变量值为D:\Java\JDK 3. 新增加一个CLASSPATH变量属性继续点新增然后添加如下代码
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar 4.找到系统变量中的Path变量双击进入点击新建输入如下一行代码然后全部点击确认环境变量配置完成。
%JAVA_HOME%\bin 四、验证是否配置成功 按下window键R在运行栏中输入cmd在命令窗口中输入java -version出现如下内容即为安装成功。 至此JDK安装成功 第四步安装Android Studio
一、基础安装 1.安装及基础配置
大家可以跟着这个博主进行安装我初次安装Android Studio就是跟着这个博主进行的内容十分详细只要一步一步跟着来Android Studio安装肯定成功。该博主在安装SDK的时候没有改SDK安装位置的操作大家在下载SDK前记得自行更改SDK下载地址到部署之前建立的SDK文件夹。
Android Studio 卸载 / 安装细节问题参考_android studio卸载-CSDN博客 2.React Native所需的SDK配置
在SDK Platforms一栏下勾选下列三个选项然后apply 在SDK Tools一栏下勾选如下两个选项然后apply然后点ok完成SDK配置 二、环境配置 React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径从而正常进行编译。 1.和上面一样的操作打开环境变量。创建一个名为ANDROID_HOME的环境变量路径如果和我设置的一样就是D:\AndroidStudio\SDK以个人Android SDK Location为准。 2.把下列工具目录添加到用户变量Path中
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin 至此整个React Native环境以及相关依赖搭建完成下面尝试创建项目。 第五步React Native
一、Yarn Yarn是 Facebook 提供的替代 npm 的工具可以加速 node 模块的下载。 在终端命令行输入npm install -g yarn出现如下内容即为安装成功。 项目创建运行部分从React Native处提取方便大家一次性尝试
二、创建新项目 如果你之前全局安装过旧的react-native-cli命令行工具请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突 npm uninstall -g react-native-cli react-native-community/cli使用 React Native 内建的命令行工具来创建一个名为AwesomeProject的新项目。这个命令行工具不需要安装可以直接用 node 自带的npx命令来使用 必须要看的注意事项一请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名如 class, native, new, package 等等。请不要使用与核心模块同名的项目名如 react, react-native 等。 必须要看的注意事项二请不要在某些权限敏感的目录例如 System32 目录中 init 项目会有各种权限限制导致不能运行 必须要看的注意事项三请不要使用一些移植的终端环境例如git bash或mingw等等这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行CMD 或 powershell运行。 [可选参数] 指定版本或项目模板 你可以使用--version参数注意是两个杠创建指定版本的项目。注意版本号必须精确到两个小数点。
npx react-native-community/cli init AwesomeProject --version X.XX.X还可以使用--template来使用一些社区提供的模板。
三、准备 Android 设备
你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机也可以是模拟器。后面我们所有的文档除非特别说明并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device简称 AVD的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整但性能较差。第三方模拟器性能较好但可能需要付费或带有广告。 1. 使用 Android 真机
你也可以使用 Android 真机来代替模拟器进行开发只需用 usb 数据线连接到电脑然后遵照在设备上运行这篇文档的说明操作即可。 2. 使用 Android 模拟器
你可以使用 Android Studio 打开项目下的android目录然后可以使用AVD Manager来查看可用的虚拟设备它的图标看起来像下面这样 如果你刚刚才安装 Android Studio那么可能需要先创建一个虚拟设备。点击Create Virtual Device...然后选择所需的设备类型并点击Next然后选择Tiramisu API Level 33 image. 译注请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议否则可能导致无法运行。 四、编译并运行 React Native 应用
确保你先运行了模拟器或者连接了真机然后在你的项目目录中运行yarn android或者yarn react-native run-android
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android此命令会对项目的原生部分进行编译同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理类似 webpack。Metro服务也可以使用yarn start命令单独启动。
如果配置没有问题你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖耗时可能数十分钟。此过程严重依赖稳定的代理软件否则将频繁遭遇链接超时和断开导致无法运行。
npx react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。 译注建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议否则可能导致无法运行。 如果你无法正常运行遇到奇奇怪怪的红屏错误先回头仔细对照文档检查然后可以看看问题讨论区。不同时期不同版本可能会碰到不同的问题我们会在论坛中及时解答更新。但请注意千万不要执行 bundle 命令那样会导致代码完全无法刷新。 五、修改项目
现在你已经成功运行了项目我们可以开始尝试动手改一改了
使用你喜欢的文本编辑器打开App.js并随便改上几行按两下 R 键或是在开发者菜单中选择 Reload就可以看到你的最新修改。 至此整个React Native环境搭建完成可以尝试创建自己的项目了 感谢大家的支持
