React-Native 环境搭建和使用模拟器调试

  • Z时代
  • 2024-01-10
  • 分类：综合

react

关于React-Native

React native源自React，React 是一套可以用简洁的语法高效绘制Dom的框架。React中需要使用JSX语法，JSX是对JavaScript的扩展。JSX可以将CSS，HTML，表达式进行一起书写，简化了html代码书写的形式。

优势

  1. 跨平台兼容性

    使用React Native，您可以编写一次代码并多次部署到Android和iOS操作系统。对于创业公司来说，这样可以节省成本，并为程序员腾出时间完成其他重要任务。

  2. 卓越性能

    除了React Native外跨平台框架还有：Cordova、AppCan、APICloud、Phonegap、Ionic、Dcloud等，这些框架基本都是在一个WebView上进行渲染，也就是说他们的性能最多就是原生app中WebView的性能。而ReactNaitve是采用JS桥接加Native桥接两个方式合并起来的。React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来

  3. 学习成本低

    使用react的框架和css布局，无需再学习其他语言

如何使用

一.环境搭建

1.安装node.js 版本>8 最好是10.0

2.安装java JDK 需要配置环境变量


新建环境变量：JAVA_HOME

查看是否正确 java

路径：C:\Program Files\Java\jdk1.8.0_201（文件安装的路径）

3.安装python 必须是2.0版本

4.安装android-studio

注意:

安装完成后初次启动android studio时可能会出现下面的界面：

单击“Cancel”按钮即可

接下来：

单击上图中的”Next”按钮进行下一步，如下图

单击上图中”Cancel”取消按钮后来欢迎界面:

注意：如果“Configure”中的”SDK Manager”不能选择的话，可以选择“Settings”
然后就会出现下面的界面：


找到下面的界面：


注意：受网络限制可能会失败，如果失败请重新换一个网速较好的网络下载即可

安装所需的软件

链接：https://pan.baidu.com/s/1W3PRPVmi61HgxjiERPS1Vg

提取码：paj2

安装成功后设置镜像

打开cmd窗口分别执行

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

安装react-native-cli

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

依赖工具都安装完成进行下一步

使用 React Native 命令行工具来创建一个名为"react_demol"的新项目：

在磁盘上新建项目文件夹，在当前文件夹下运行如下命令：

react-native init react_demol


项目创建完后不要启动 要先编译（ndroid ）

1.打开Android studio

2.打开创建的react_demol 项目如图：

选择android 文件>点击ok

执行编译

如果出现这样的错误：

找到android文件下的gradle.properties

添加：android.overridePathCheck=true

再次执行编译

编译成功

3.关闭Android Studio

4.打开雷电模拟器


5.在react_demol文件下执行 npx react-native run-android

注：会有两个窗口出现 一个cmd 一个 node

6.查看雷电模拟器

7.双击打开会出现这样的错误

8.选择右下角 更多》摇一摇》Settings

9.选择 Debug server host & port for device

填写本机ip和react-native默认端口号：8081

查看本机ip

cmd >ipconfig


10.填写完成后点击右下角设置》立即清理》保存设置

11.再次点击模拟上的react_demol

成功

此时的node窗口

注意：不要关闭

12.手写一个HelloWorld

打开代码 App.js

将内容删除掉

添加代码

13.模拟器界面

以上是 React-Native 环境搭建和使用模拟器调试 的全部内容， 来源链接： utcz.com/z/382879.html

回到顶部