笔记--RN实例

React第7天

RN学习说明

1. ReactNative是基于React这门框架的语法来进行开发的；
2. RN中，提供了 移动端 专用的一些组件，这时候，我们在网页中使用的一些 元素，div, p, img 都不能用了，只能使用RN固有的组件；
3. 最终，开发出来的项目，是要运行到手机上的，那么，如何把一个 RN 的项目，完整的发布到手机上去运行呢，这里，需要结合 安卓的 签名打包步骤，并使用 RN 提供的打包命令，进行完整 apk 文件的发布；最终发布出来的就是 Release 版本的项目，可以上传到应用商店；

配置ReactNative基本开发环境

搭建基本的开发环境 - 英文官网

搭建基本的开发环境 - 中文
这两篇文档对比着进行参考，进行相关的安装；

手机的相关配置

1. 使用数据线，把手机链接到电脑上；
2. 运行 adb devices 的命令，这个命令，是安卓开发环境提供的；
3. 需要先开启手机的开发者模式
4. 如果开启开发者模式之后，还是看不到设备，则尝试安装 豌豆荚 这样的工具，让这些工具帮助你在电脑上安装手机的驱动；

搭建RN的项目

1. 运行react-native init 项目名称来初始化一个react native项目；
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QtAGdC2i-1648896331754)(images/01.项目初始化完毕之后截图并说明.png)]
2. 打包运行项目，把打包好的项目部署到手机中！

• 确保手机已经正确的链接到了当前电脑上，同时手机开启了开发者调试模式；可以使用adb devices来查看当前链接到电脑上的手机设备列表！
• 当确认手机正确链接到电脑上之后，可以运行react-native run-android来打包当前项目，并把打包好的项目以调试的模式安装到手机中！
• 打包完成之后的截图
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pf1Cbgzs-1648896331759)(images/02.打包完成之后的截图.png)]
• React Package窗口的作用
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1MmXeLf-1648896331760)(images/03.React Package窗口的作用.png)]
• 04.React Packager打包编译代码截图
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ECx9eTUD-1648896331762)(images/04.React Packager打包编译代码截图.png)]
• 当第一打包编译项目部署到手机上之后 - 如何设置开发服务器的地址
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k2RsaSCy-1648896331763)(images/05.当第一打包编译项目部署到手机上之后 - 如何设置开发服务器的地址.png)]

项目结构介绍以及一些注意事项

使用样式

##修改项目首屏页面

基本组件的使用介绍

• View：
• Text：
• TextInput：
• Image：
• Button：
• ActivityIndicator：
• ScrollView：这是一个列表滚动的组件
• ListView：也是一个