React第7天
RN学习说明
- ReactNative是基于React这门框架的语法来进行开发的;
- RN中,提供了 移动端 专用的一些组件,这时候,我们在网页中使用的一些 元素,div, p, img 都不能用了,只能使用RN固有的组件;
- 最终,开发出来的项目,是要运行到手机上的,那么,如何把一个 RN 的项目,完整的发布到手机上去运行呢,这里,需要结合 安卓的 签名打包步骤,并使用 RN 提供的打包命令,进行完整 apk 文件的发布;最终发布出来的就是 Release 版本的项目,可以上传到应用商店;
配置ReactNative基本开发环境
搭建基本的开发环境 - 英文官网
搭建基本的开发环境 - 中文
这两篇文档对比着进行参考,进行相关的安装;
手机的相关配置
- 使用数据线,把手机链接到电脑上;
- 运行
adb devices
的命令,这个命令,是安卓开发环境提供的; - 需要先开启手机的
开发者模式
- 如果开启开发者模式之后,还是看不到设备,则尝试安装
豌豆荚
这样的工具,让这些工具帮助你在电脑上安装手机的驱动;
搭建RN的项目
- 运行
react-native init 项目名称
来初始化一个react native项目;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QtAGdC2i-1648896331754)(images/01.项目初始化完毕之后截图并说明.png)] - 打包运行项目,把打包好的项目部署到手机中!
- 确保手机已经正确的链接到了当前电脑上,同时手机开启了
开发者调试模式
;可以使用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:也是一个