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 创建新项目

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 启动程序

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

yarn android

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

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

5.2 在手机中安装

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

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

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

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

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就能够正常。