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

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.xdnf.cn/news/19423.html

相关文章:

  • 从支付工具到收益资产:稳定币在 Berachain 上的二次进化
  • 四、GC 垃圾回收(二)
  • 小模型 vs 大模型:企业 AI 落地的成本、性能与场景适配选择
  • 广东省省考备考(第九十天8.30)——判断推理(第十节课)
  • 企业为什么需要部署数据防泄露系统?
  • 第三十一天:数列求和取模
  • C++讲解---如何设计一个类
  • 【lua】模块基础及应用
  • LED灯带离线语音控制方案WTK6900P
  • fork详解(附经典计算题)
  • 苍穹外卖项目笔记day02
  • Rust 登堂 之 Sized和不定长类型 DST(七)
  • leetcode刷题记录08——top100题里的5道中等题
  • Vue基础知识-methods事件绑定(@事件名和v-on:事件名)和常用事件修饰(.prevent/.stop/.once/.enter)
  • Coze源码分析-API授权-删除令牌-后端源码
  • 【15】VisionMaster入门到精通——--通信--TCP通信、UDP通信、串口通信、PLC通信、ModBus通信
  • 鸿蒙ArkTS 核心篇-16-循环渲染(组件)
  • lvgl模拟器 被放大 导致显示模糊问题
  • Notepad++使用技巧1
  • 日志ELK、ELFK、EFK
  • 快速学习和掌握Jackson 、Gson、Fastjson
  • AI + 行业渗透率报告:医疗诊断、工业质检领域已进入规模化落地阶段
  • GD32入门到实战20--定时器
  • 【LeetCode】大厂面试算法真题回忆(122) —— 篮球比赛
  • react性能优化有哪些
  • SSR降级CSR:高可用容灾方案详解
  • Android中handler机制
  • 【Android】JSONObject和Gson的使用
  • HTTP的概念、原理、工作机制、数据格式和REST
  • 《C++——makefile》