React Native基本用法

发布于:2025-09-01 ⋅ 阅读:(14) ⋅ 点赞:(0)

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的值


网站公告

今日签到

点亮在社区的每一天
去签到