文章目录react native(学习笔记第一课)环境构筑(hello,world)1. 为什么使用react native1.1 使用react native的架构2. 开发环境的构建2.1 环境构筑参照文档2.2 搭建开发环境2.2.1 安装依赖包2.2.2 安装Android SDK2.2.3 配置ANDROID_HOME环境变量2.2.4 把工具目录添加到环境变量 Path3. 创建新项目3.1 创建新项目3.2 使用android studio打开android子目录4. 使用真机进行调式4.1 打开手机的USB调试模式4.2 将手机通过USB和电脑连接5. 启动react native程序hello,world5.1 启动程序5.2 在手机中安装6. 修改画面在手机显示7. 接下来的学习之旅react native(学习笔记第一课)环境构筑(hello,world)为什么练习react native开发环境的构建创建react native新项目使用真机进行调式启动react native程序hello,world修改画面在手机显示1. 为什么使用react native1.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 安装依赖包根据文档安装NodeJava JDKAndroid Studioyarn。安装NodeNode的版本应大于等于 22.11.0安装完 Node 后建议设置 npm 镜像淘宝源以加速后面的过程或使用科学上网工具安装Java JDKreact native需要Java Development Kit [JDK] 17这里练习的时候开始安装了JDK 22结果之后的出现了问题。注意这里安装完成JDK之后需要两件事。设定JAVA_HOME环境变量将JDK的bin目录设定到PATH环境变量安装Android StudioAndroid Studio的官方网站这里需要注意环境安装需要的磁盘空间较大事前请准备。使用android studio安装的下面的三个部分之后详细说明。Android SDKAndroid SDK PlatformAndroid Virtual Device安装yarn最后根据文档安装yarn可以加速 node 模块的下载。2.2.2 安装Android SDK打开android studio进行android sdk的安装Android SDK Platform 35Intel x86 Atom_64 System Image官方模拟器镜像文件使用非官方模拟器不需要安装此组件2.2.3 配置ANDROID_HOME环境变量2.2.4 把工具目录添加到环境变量Path3. 创建新项目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,world5.1 启动程序进入项目的根目录执行启动命令yarnandroid这里的命令同时会启动一个metro的服务进行端口在8081第一次启动会非常花时间进行编译请高低等一会。5.2 在手机中安装这里编辑结束了之后会开始向手机进行安装AwsomeProject的程序。执行了yarn android之后最终会出现在手机上这个安装程序。因为是自己的安装应用所以这里选择安装。没有问题这里的手机应用就显示出来了。6. 修改画面在手机显示这里修改App.tsx文件进行主界面的更新。importReactfromreact;import{View,Text,Image,ScrollView,TextInput}fromreact-native;constApp(){return(ScrollViewTextallenismy great son/TextViewTextallen,go!/TextImage source{{uri:https://reactnative.dev/docs/assets/p_cat2.png,}}style{{width:200,height:200}}//ViewTextInput style{{height:40,borderColor:gray,borderWidth:1,}}defaultValueYou can type in me//ScrollView);};exportdefaultApp;接下来就开始愉快的react native和react的开发练习吧。注意每次重新更新程序了之后可以进行R键的刷新注意如果有啥问题显示不出来在手机上卸载程序停止yarn android和8081端口的服务之后重启动yarn android就能够正常。7. 接下来的学习之旅react native的学习官方网站react的学习官方网站