当前位置: 首页 > news >正文

React Native基本用法

1,index

在这里插入图片描述
调用registerComponent,把appName注入到React Native的根节点。

2,package.json是全局大管家,package-lock.json锁定版本,不会手动编辑,通过install安装

3, bebal.config.json

bebal.config.json是翻译器,默认只有一个presets,如果需要增加,就手动添加plugin

4,node-modules:

node-modules:工程引用的库,经过install后会保存到这个库。通常不会手动改,但可以手动改,改了后也会生效。与gradle不同,gradle的文件不能修改,是read-only

5,package.json

{"name": "SaasRN",//应用名字"version": "0.0.1",//应用版本"private": true,//私有工程,不能通过npm publish发布出去"scripts": {//脚本},"dependencies": {//},"devDependencies": {//开发阶段所需要依赖的包},"engines": {"node": "=20.14.0","yarn": "=1.22.22"},"resolutions": {"styled-components": "^5"},"config": {"commitizen": {"path": "node_modules/cz-customizable"},"cz-customizable": {"config": ".cz-config.js"},"a": 1}
}

读取package.json文件在这里插入图片描述

6,Android gradle覆盖APP名字

在这里插入图片描述

在这里插入图片描述
脚本中覆盖

7,安装到不同的dependencies

在这里插入图片描述绿色是dependencies,红色是devDependencies8,导入json文件的两种方式

8,导出json

在这里插入图片描述

在这里插入图片描述

9,导出js方法一

在这里插入图片描述
导入
在这里插入图片描述
因为只有一份方法,所以可以直接导出test,使用test();

9,导出js方法二

有多个方法
在这里插入图片描述
在这里插入图片描述
因为没有默认导出,所以要用{}。

10,class 组件与函数式组件

11.1class组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

注意,传值的时候,只要不是字符串就要写{}
在这里插入图片描述
在这里插入图片描述
class组件,props是外部传入,state是内部维护
11.2函数式组件,有三种写法,
第一种写法 function FunctionView() {}
第二种写法 const FunctionView=()=>{}
第三种写法
在这里插入图片描述
传参的写法
在这里插入图片描述
hook是函数式组件的一大特色。
在这里插入图片描述
上述代码,先打印return… 再打印useEffect…
在这里插入图片描述

useRef是命令式驱动。可以在ScrollView中使用

在这里插入图片描述
获取屏幕的宽高。这个宽高是逻辑单位,不是物理像素

11,jsx语法

拆分渲染
(1)用方法拆分模块
在这里插入图片描述
(2)用组件拆分模块
在这里插入图片描述
(3)在这里插入图片描述
children就在props里,不需要手动传
内联样式与样式表
在这里插入图片描述
写样式表性能会更好

样式组合
在这里插入图片描述
在这里插入图片描述

12,标准写法和简略写法

标准写法如下
在这里插入图片描述
简略写法一
在这里插入图片描述
简略写法二
在这里插入图片描述

13,条件渲染

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

14,列表渲染

在这里插入图片描述
在这里插入图片描述
item只有一个参数的时候,可以去掉()

15,数组渲染

在这里插入图片描述
把一组View放到数组里面

16计时器

setInternavl执行多次,setTimeout只执行一次
有问题的写法
在这里插入图片描述
上述代码,setInterval传入的是一个闭包,count每次引用的都是上一个值,不是在外部更新的值,
匿名函数+闭包的正确写法
setCount里面传入回调函数,而不是传值
在这里插入图片描述
data是外部传入的。return 的值作为setCount的值

http://www.dtcms.com/a/358912.html

相关文章:

  • 大语言模型生成的“超龄劳动者权益保障制度系统化完善建议(修订版)”
  • 下一波红利:用 #AI编程 闯入小游戏赛道,#看广告变现 模式正在崛起!
  • I2C的类比水池和大海
  • 【前端教程】DOM 操作入门专栏:从基础到实战
  • JS之刷刷
  • Langflow核心技术学习笔记(新)
  • LangChain.js 实战与原理:用 LCEL 构建可维护的 RAG / Agent 系统(含 4 套 30+ 行代码)
  • 揭开智能体架构面纱:90% 属软件工程,10% 为 AI 技术
  • Python数据分析:在Python中,reindex和set_index以及reset_index最本质的区别是什么?
  • B树与B+树的原理区别应用
  • Python 的 argparse 模块中,add_argument 方法的 nargs 参数
  • Ubuntu系统下交叉编译Android的X264库
  • hello算法笔记 01
  • Jedis、Lettuce、Redisson 技术选型对比
  • 下载 | Win11 23H2正式版最新原版ISO系统映像 (22631.5840、多合一版本)-修复系统问题
  • LangGraph 深度解析(二):掌握 LangGraph 函数式 API 的状态化 AI 工作流
  • openEuler2403安装部署Redis8
  • JavaScript之性能优化
  • HiFi-GAN模型代码分析
  • txt2las批量测井txt文件转las
  • 【C++】类和对象3
  • 【学Python自动化】 1. Python 安装与配置完全指南 (Windows)
  • 微论-突触的作用赋能思考(可能是下一代人工智能架构的启发式理论)
  • fastdds qos:LifespanQosPolicy
  • 2025年- H101-Lc209--1979.找出数组的最大公约数(gcd最大公约数)--Java版
  • STM32G474 IAP 双bank升级的坑
  • git的三种分区与分支的关系
  • Pomian语言处理器研发笔记(二):使用组合模式定义表示程序结构的语法树
  • for in+逻辑表达式 生成迭代对象,最后转化为列表 ——注意list是生成器转化为列表,但[生成器]得到的就是一个列表,其中包含一个生成器元素
  • HarmonyOS 持久化存储:PersistentStorage 实战指南