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