React Native学习笔记

React Native 是由 Facebook(现 Meta)开发的开源移动应用框架,用于使用 JavaScript 和 React 构建真正的原生移动应用(iOS 和 Android)

跨平台开发:用一套 JavaScript 代码同时生成 iOS 和 Android 应用,复用率可达 70%~90%

原生性能:通过桥接机制(Bridge) 将 JS 代码编译为原生组件(非 WebView),直接调用平台原生 API(如相机、GPS),体验接近纯原生应用

热重载(Hot Reloading):修改代码后实时预览效果,无需重新编译整个应用,大幅提升开发效率,调试周期缩短 50% 以上

搭建开发环境

基础环境:node.js(>=12)、yarn、react-natie-cli(保障js代码可以正常使用)

mac可以搭建安卓和ios的开发环境,但是windows只能搭建Android环境

搭建安卓环境:

安装jdk(java SE Development Kit)版本必须是1.8

安装Android Studio(需要翻墙),启动需要安装组件,大概2G,比较慢

安装 Android SDK(针对安卓开发的套件,虽然Android Studio会默认安装最新版本的Android SDK,但是目前编译React Native需要Android10版本的SDK)

安装方式:打开Android Studio,在菜单Tools下找到SDK Manager

配置环境变量:ANDROID_HOME

搭建IOS环境

Watchman: brew install watchman

Xcode(相当于Android Studio),>=10,appstore安装

Cocoapods(类似于npm):brew install cocoapods

初始化项目:

react-native init myApp // 创建项目

cd myApp

yarn android、yarn ios // 启动项目

vs Code插件:ES7 React/Redux/GraphQL/ReactNative/JS snippets

使用快捷键:rnc(react native class)生成rn 类组件

使用快捷键:rnf(react native function)生成rn 函数组件

调试工具:

模拟器调试:模拟器一般是根据Android Studio和Xcode一起安装的,启动应用模拟器会一起启动

点击模拟器,使模拟器获取焦点

快捷键:ctrl+m、command+m 选debug

自动跳转到浏览器,可以使用web调试的方式去调试

真机调试:打开usb调试模式,通过usb线将电脑和手机连接,启动应用,在手机上安装应用

基础语法

React:jsx语法Redux,常用安装包,生命周期

StyleSheet:

rn中的样式没有继承,只发生在text组件中,样式采用小驼峰,尺寸没有单位

特殊样式名:marginHorizontal(水平外边距),marginVertical(垂直外边距)

rn样式的声明方式是通过style属性直接声明,如果有样式重叠,后边的会覆盖前边的

属性为对象:<组件 style = { {} } />

属性为数组:<组件 style = { {},{} } />

Flexbox

组件和api

路由和导航

flexbox

架构原理

项目实践

工程创建

常用组件介绍

模拟器的安装和使用

页面开发环境配置和使用

页面发布

相关推荐
AOwhisky2 分钟前
Python 学习笔记(第三期)——流程控制核心知识点自测与详解
开发语言·笔记·python·学习·云原生·运维开发·流程控制
tyqtyq223 分钟前
药品说明书解读 —— AI 安全用药助手,鸿蒙原生应用深度解析
人工智能·学习·华为·生活·harmonyos
小心亦新1 小时前
STM32学习13 定时器1中断
stm32·嵌入式硬件·学习
我命由我123451 小时前
72 法则极简理解
经验分享·笔记·学习·职场和发展·求职招聘·职场发展·学习方法
qq_263_tohua2 小时前
第112期 CNN学习,不错的文章
学习
我想我不够好。2 小时前
满级的惩戒在范围
学习
xian_wwq3 小时前
【学习笔记】OpenAI 兼容 API 服务化:从协议到 LLM Gateway(19/35)
笔记·学习
辞旧 lekkk4 小时前
【Qt系统相关】鼠标事件
linux·开发语言·qt·学习·计算机外设·萌新
醉城夜风~4 小时前
SQL DQL数据查询语言全套学习笔记(基础查询→执行顺序全解析)
笔记·sql·学习
子非鱼94274 小时前
10-Flutter调用鸿蒙原生能力前置课:MethodChannel和PlatformView准备
学习·flutter·华为·harmonyos