react native(学习笔记第一课)环境构筑(hello,world)

文章目录

[react native(学习笔记第一课)环境构筑(hello,world)](#react native(学习笔记第一课)环境构筑(hello,world))
- [1. 为什么使用`react native`](#1. 为什么使用react native)
- - [1.1 使用`react native`的架构](#1.1 使用react native的架构)
- [2. 开发环境的构建](#2. 开发环境的构建)
- - [2.1 环境构筑参照文档](#2.1 环境构筑参照文档)
  - [2.2 搭建开发环境](#2.2 搭建开发环境)
  - - [2.2.1 安装依赖包](#2.2.1 安装依赖包)
    - [2.2.2 安装`Android SDK`](#2.2.2 安装Android SDK)
    - [2.2.3 配置`ANDROID_HOME`环境变量](#2.2.3 配置ANDROID_HOME环境变量)
    - [2.2.4 把工具目录添加到环境变量 `Path`](#2.2.4 把工具目录添加到环境变量 Path)
- [3. 创建新项目](#3. 创建新项目)
- - [3.1 创建新项目](#3.1 创建新项目)
  - [3.2 使用`android studio`打开`android`子目录](#3.2 使用android studio打开android子目录)
- [4. 使用真机进行调式](#4. 使用真机进行调式)
- - [4.1 打开手机的`USB`调试模式](#4.1 打开手机的USB调试模式)
  - [4.2 将手机通过`USB`和电脑连接](#4.2 将手机通过USB和电脑连接)
- [5. 启动`react native`程序，`hello,world`](#5. 启动react native程序，hello,world)
- - [5.1 启动程序](#5.1 启动程序)
  - [5.2 在手机中安装](#5.2 在手机中安装)
- [6. 修改画面，在手机显示](#6. 修改画面，在手机显示)

react native(学习笔记第一课)环境构筑(hello,world)

为什么练习react native
开发环境的构建
创建react native新项目
使用真机进行调式
启动react native程序，hello,world
修改画面，在手机显示

1. 为什么使用`react native`

1.1 使用`react native`的架构

官方网站
react native的中文网站
 react的学习网站
项目的代码库
react native项目的代码
react非常重要
react native的基础就是react，深入学习react native的同时碰到问题，还会同时练习react的例子。
react native能做什么
这里已经将react native进行了说明。主要是利用react native的前端开发技术，能够开发android和ios等操作系统的共通UI画面，及其充满诱惑力。
android和ios的原生view
这些view构成了android appliation和ios application开发的基础。

2. 开发环境的构建

2.1 环境构筑参照文档

参照官方的文档进行构筑。
react native环境构筑官方文档

这个文档已经相当详细，之后就开始环境的搭建。

2.2 搭建开发环境

2.2.1 安装依赖包

根据文档，安装Node，Java JDK，Android Studio，yarn。

安装Node
Node 的版本应大于等于 22.11.0
安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具
安装Java JDK
react native 需要 Java Development Kit [JDK] 17，这里练习的时候开始安装了JDK 22，结果之后的出现了问题。

注意，这里安装完成JDK之后需要两件事。
- 设定JAVA_HOME环境变量
- 将JDK的bin目录设定到PATH环境变量
安装Android Studio
Android Studio的官方网站
这里需要注意，环境安装需要的磁盘空间较大，事前请准备。
使用android studio，安装的下面的三个部分，之后详细说明。
- Android SDK
- Android SDK Platform
- Android Virtual Device
安装yarn
最后，根据文档安装yarn，可以加速 node 模块的下载。

2.2.2 安装`Android SDK`

打开android studio，进行android sdk的安装

Android SDK Platform 35
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

2.2.3 配置`ANDROID_HOME`环境变量

2.2.4 把工具目录添加到环境变量 `Path`

3. 创建新项目

3.1 创建新项目

shell 复制代码

npx @react-native-community/cli init AwesomeProject

建好的目录如下所示。

3.2 使用`android studio`打开`android`子目录

其中的android子目录就是一个完整的android工程，使用android studio打开。

注意：这里会使用gradle来管理整个工程，但是如果是使用gradle-wrapper.properties中的设定，会异常缓慢，解决办法是使用这里的https地址进行手动下载，之后放在%user_home%\.gradle\wrapper\dists\这里，之后重新启动gradle的项目刷新。

这里需要时间特别长，需要耐心等待。

4. 使用真机进行调式

这里使用harmony的鸿蒙华为手机，作为真机进行调试。

4.1 打开手机的`USB`调试模式

系统和更新 →开发人员选项→USB调试进行开启。

4.2 将手机通过`USB`和电脑连接

使用USB将手机和电脑进行连接，之后在上面的Device Manager里面就会出现自己的手机。

5. 启动`react native`程序，`hello,world`

5.1 启动程序

进入项目的根目录，执行启动命令

shell 复制代码

yarn android

这里的命令，同时会启动一个metro的服务进行，端口在8081

第一次启动会非常花时间进行编译，请高低等一会。

5.2 在手机中安装

这里，编辑结束了之后，会开始向手机进行安装AwsomeProject的程序。

执行了yarn android之后，最终会出现在手机上这个安装程序。因为是自己的安装应用，所以这里选择安装。

没有问题，这里的手机应用就显示出来了。

6. 修改画面，在手机显示

这里修改App.tsx文件，进行主界面的更新。

typescript 复制代码

import React from 'react';
import {View, Text, Image, ScrollView, TextInput} from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>allen is my great son</Text>
      <View>
        <Text>allen,go!</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{width: 200, height: 200}}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
};

export default App;

接下来就开始愉快的react native和react的开发练习吧。
注意：每次重新更新程序了之后可以进行R键的刷新
注意：如果有啥问题，显示不出来，在手机上卸载程序，停止yarn android和8081端口的服务，之后重启动yarn android就能够正常。

react native(学习笔记第一课)环境构筑(hello,world)

文章目录