React中环境配置和虚拟机安装

有时候我们要执行一些执行，但是指令文件只是在特定的目录中，如果这些目录在环境变量中配置了，这些目录中的指令文件就可以在系统的任何位置访问了，这样我们就可以直接使用这些指令

打开环境变量配置

计算机 => 属性 => 高级系统设置

新增：是创建一个新的环境变量

编辑：修改原来的环境变量

换将变量有两类

系统环境变量：可以在任何用户中使用

用户环境变量：只能在该用户中是用。

创建JAVA_HOME环境变量

变量名：JAVA_HOME

变量值：java安装的目录：C:\Program Files (x86)\Java\jdk1.8.0_144

修改path环境变量

添加bin目录

第一种 C:\Program Files (x86)\Java\jdk1.8.0_144\bin

第二种 %JAVA_HOME%\bin

添加jre\bin目录

第一种 C:\Program Files (x86)\Java\jdk1.8.0_144\jre\bin

第二种 %JAVA_HOME%\jre\bin

注意：​​修改前，一定要先将原来的path复制出来，再修改​​

创建ANDROID_HOME环境变量

变量名：ANDROID_HOME

变量值：

如果是第二种安装方式C:\Program Files (x86)\Android\android-sdk

如果是第三种安装方式,就是解压的目录 d:\android-sdk

修改path环境变量

添加tools目录

第一种 C:\Program Files (x86)\Android\android-sdk\tools

第二种 %ANDROID_HOME%\tools

添加platform-tools目录

第一种 C:\Program Files (x86)\Android\android-sdk\platform-tools

第二种 %ANDROID_HOME%\platform-tools

注意：​​修改前，一定要先将原来的path复制出来，再修改​​

测试前，一定要重启CMD

测试javas

javac -version

测试 android

android 打开Android adk管理工具

adb devices 查看链接手机设备

首先用use数据线链接手机和电脑

手机开启开发者模式

​​提供了一个虚拟机运行环境​​

点击安装程序，进行下一步安装

点击安装程序，进行下一步安装

我们首先打开virtual box，再genymotion。

​​进入​​网站，注册账号

登录

点击添加设备按钮，选择一个设备

下载设备的时候，是向C:\Users\think\AppData\Local\Genymobile\Genymotion\ova目录下，下载设备的

我们可以将给大家发的ova文件放在目录中，

我们也可以进入virtual box软件，点击 管理 => 导入虚拟电脑 => 选择ova文件，点击下一步，开始导入设备

进入设置页面，点击adb，选择Android sdk安装目录

输入adb devices查看是否有链接的设备

能够找到手机的设备，我们就可以输入react-native run-android来启动项目了

此时我们就可以在虚拟设备中看到欢迎页面了

react-native run-android

reload 表示重新加载页面

disabled|enabled hot reloading 是否关闭或者打开热加载

我们可以安装devtools来调试页面视图结构

npm install -g react-devtools

此时提供了react-devtools，我们可以打开调试界面

模拟了chrome的调试器，但是不能输出信息

我们常常在调试中，输入一些信息，react-native内置了log指令，可以帮我们查看数据信息

android： react-native log-android

ios: react-native log-ios

注意：在项目的目录下运行

react-native log-android

RN的核心是react，因此定义虚拟DOM和组件的语法都是一样的

例如定义虚拟DOM :

注意：native不是浏览器环境，因此没有web端的DOM元素，但是RN通过一些组件可以模拟这些DOM元素，例如

View 模拟 div

Text 模拟 span

这些组件都是RN提供的，因此使用这些组件要通过RN引入

定义组件的语法跟web端定义组件的语法是一样的。

web端 class 组件 extends Component {}

native端 class 组件 extends Component<{}> {}

<{}>这是ts语法中的泛类型。

其他的都一样

RN也是用ES Module规范开发项目

在web端，我们用input定义输入框

在RN中，我们用TextInput组件定义输入框

它们是很相似的，如都可以通过placeholder定义提示的文案

在input元素中，通过onChange事件监听内容的变化，参数是事件对象

在TextInput组件中，通过onChangeText事件监听内容的变化，参数是​​内容​​。