diff --git a/content/posts/hugo-usage/index.md b/content/posts/hugo-usage/index.md index a476684..0230e3c 100644 --- a/content/posts/hugo-usage/index.md +++ b/content/posts/hugo-usage/index.md @@ -4,6 +4,7 @@ date: 2023-08-24T09:11:47+08:00 # draft: true # bookComments: false # bookSearchExclude: false +categories: [write] tags: [tool, write] --- diff --git a/content/posts/rn/alert-multiple/index.md b/content/posts/rn/alert-multiple/index.md index aee40da..3cdbad1 100644 --- a/content/posts/rn/alert-multiple/index.md +++ b/content/posts/rn/alert-multiple/index.md @@ -2,6 +2,7 @@ title: "实现 差不多理想的极简RN弹窗" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [best-practice, react-native] --- diff --git a/content/posts/rn/art-text/index.md b/content/posts/rn/art-text/index.md index 5b626a0..4aef9a6 100644 --- a/content/posts/rn/art-text/index.md +++ b/content/posts/rn/art-text/index.md @@ -2,6 +2,7 @@ title: "远程字体的动态加载&应用" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [best-practice, react-native] --- diff --git a/content/posts/rn/base-components/index.md b/content/posts/rn/base-components/index.md index 51cf0d6..b1267b7 100644 --- a/content/posts/rn/base-components/index.md +++ b/content/posts/rn/base-components/index.md @@ -2,6 +2,7 @@ title: "封装常用基础组件" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [react-native, component] --- diff --git a/content/posts/rn/code-standards/index.md b/content/posts/rn/code-standards/index.md index 7687213..a74a66d 100644 --- a/content/posts/rn/code-standards/index.md +++ b/content/posts/rn/code-standards/index.md @@ -2,7 +2,8 @@ title: "代码规范" date: 2023-11-01T12:00:11+08:00 draft: false -tags: [learn, standard] +categories: [code] +tags: [learn, standard, code] --- # 讨论背景 diff --git a/content/posts/rn/course-react-hooks/index.md b/content/posts/rn/course-react-hooks/index.md index 963a882..a698074 100644 --- a/content/posts/rn/course-react-hooks/index.md +++ b/content/posts/rn/course-react-hooks/index.md @@ -2,6 +2,7 @@ title: "学习《React Hooks 核心原理与实战》笔记" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react] tags: [learn, react] --- diff --git a/content/posts/rn/course-react/index.md b/content/posts/rn/course-react/index.md index 3285df8..8c49dad 100644 --- a/content/posts/rn/course-react/index.md +++ b/content/posts/rn/course-react/index.md @@ -2,6 +2,7 @@ title: "React 学习" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react] tags: [learn, react] --- diff --git a/content/posts/rn/create-npm-lib/index.md b/content/posts/rn/create-npm-lib/index.md index c241b4e..d6f030e 100644 --- a/content/posts/rn/create-npm-lib/index.md +++ b/content/posts/rn/create-npm-lib/index.md @@ -2,6 +2,7 @@ title: "用脚手架 制作一个RN库 放npm" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [contribution, package, react-native] --- diff --git a/content/posts/rn/douyin-label-input/index.md b/content/posts/rn/douyin-label-input/index.md index 79a96e4..14b946c 100644 --- a/content/posts/rn/douyin-label-input/index.md +++ b/content/posts/rn/douyin-label-input/index.md @@ -2,6 +2,7 @@ title: "模仿抖音、小红书 输入 #标签 高亮" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [react-native] --- diff --git a/content/posts/rn/multi-gestture-sticker/index.md b/content/posts/rn/multi-gestture-sticker/index.md index cb52c57..cb65076 100644 --- a/content/posts/rn/multi-gestture-sticker/index.md +++ b/content/posts/rn/multi-gestture-sticker/index.md @@ -2,6 +2,7 @@ title: "RN 动画 - 缩放、旋转、拖拽" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [best-practice, react-native] --- diff --git a/content/posts/rn/readme/index.md b/content/posts/rn/readme/index.md index 4b6578a..7073f34 100644 --- a/content/posts/rn/readme/index.md +++ b/content/posts/rn/readme/index.md @@ -2,6 +2,7 @@ title: "React Native 开发沉淀" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [contribution, react-native] --- diff --git a/content/posts/rn/rn-pull-request/index.md b/content/posts/rn/rn-pull-request/index.md index 4e28fe8..0b72891 100644 --- a/content/posts/rn/rn-pull-request/index.md +++ b/content/posts/rn/rn-pull-request/index.md @@ -2,6 +2,7 @@ title: "第一次提交PR给react-native" date: 2023-12-18T12:00:11+08:00 draft: false +categories: [react-native] tags: [contribution, react-native] --- diff --git a/content/posts/rn/status-sync-global/index.md b/content/posts/rn/status-sync-global/index.md index 1af7945..ff75745 100644 --- a/content/posts/rn/status-sync-global/index.md +++ b/content/posts/rn/status-sync-global/index.md @@ -2,7 +2,8 @@ title: "最佳实践 点赞(收藏等)状态的全局同步更新" date: 2023-12-18T12:00:11+08:00 draft: false -tags: [react-native] +categories: [react-native] +tags: [best-practice, react-native] --- diff --git a/content/posts/rn/textinput-alert/index.md b/content/posts/rn/textinput-alert/index.md index 3efe615..1126c29 100644 --- a/content/posts/rn/textinput-alert/index.md +++ b/content/posts/rn/textinput-alert/index.md @@ -2,6 +2,7 @@ title: "封装 低耦合、易用的文本输入框弹窗" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [best-practice, react-native] --- diff --git a/content/posts/rn/tool-dev-react/index.md b/content/posts/rn/tool-dev-react/index.md index 44d3234..423f7cc 100644 --- a/content/posts/rn/tool-dev-react/index.md +++ b/content/posts/rn/tool-dev-react/index.md @@ -2,6 +2,7 @@ title: "hooks开发工具" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react] tags: [react, tool] --- diff --git a/content/posts/rn/tool-npm-patch/index.md b/content/posts/rn/tool-npm-patch/index.md index 7e1deb5..6d2c175 100644 --- a/content/posts/rn/tool-npm-patch/index.md +++ b/content/posts/rn/tool-npm-patch/index.md @@ -2,6 +2,7 @@ title: "patch-package 补丁工具使用" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [npm] tags: [tool, npm] --- diff --git a/content/posts/rn/tool-npm/index.md b/content/posts/rn/tool-npm/index.md index 074d2db..b27d164 100644 --- a/content/posts/rn/tool-npm/index.md +++ b/content/posts/rn/tool-npm/index.md @@ -2,6 +2,7 @@ title: "npm 工具" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [npm] tags: [tool, npm] --- diff --git a/content/posts/rn/tool-rn-jenkins-ios/index.md b/content/posts/rn/tool-rn-jenkins-ios/index.md index 7b68e7e..d60efe9 100644 --- a/content/posts/rn/tool-rn-jenkins-ios/index.md +++ b/content/posts/rn/tool-rn-jenkins-ios/index.md @@ -2,6 +2,7 @@ title: "从0到1用Jenkins实现对RN项目一键打包、发布" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [tool, react-native, ios] --- diff --git a/content/posts/rn/vscode-efficient/index.md b/content/posts/rn/vscode-efficient/index.md index 1dc302c..fb2a0d4 100644 --- a/content/posts/rn/vscode-efficient/index.md +++ b/content/posts/rn/vscode-efficient/index.md @@ -2,6 +2,7 @@ title: "React Native 在VSCode编码提效" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [tool, react-native] --- 
 diff --git a/content/posts/rn/waterfall-list-autoscroll/index.md b/content/posts/rn/waterfall-list-autoscroll/index.md index 808f445..16c9c83 100644 --- a/content/posts/rn/waterfall-list-autoscroll/index.md +++ b/content/posts/rn/waterfall-list-autoscroll/index.md @@ -2,6 +2,7 @@ title: " 实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [react-native] --- diff --git a/content/posts/rn/waterfall-list-horizontal/index.md b/content/posts/rn/waterfall-list-horizontal/index.md index 9c7bb0d..a7b922b 100644 --- a/content/posts/rn/waterfall-list-horizontal/index.md +++ b/content/posts/rn/waterfall-list-horizontal/index.md @@ -2,6 +2,7 @@ title: "横向 瀑布流列表" date: 2023-11-01T12:00:11+08:00 draft: false +categories: [react-native] tags: [react-native] --- diff --git a/content/posts/rn/waterfall-perfect/index.md b/content/posts/rn/waterfall-perfect/index.md index a0ecbd5..8870c83 100644 --- a/content/posts/rn/waterfall-perfect/index.md +++ b/content/posts/rn/waterfall-perfect/index.md @@ -2,6 +2,7 @@ title: "瀑布流最佳实践：双列均匀分布，高度计算&缓存" date: 2024-03-05T19:36:11+08:00 draft: false +categories: [react-native] tags: [best-practice, react-native] --- diff --git a/hugo.toml b/hugo.toml index cef3be7..b9e8bbe 100644 --- a/hugo.toml +++ b/hugo.toml @@ -109,10 +109,10 @@ ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"] title = "LoveIt-zyestin" # website description for RSS, SEO, Open Graph and Twitter Cards # 网站描述, 用于 RSS, SEO, Open Graph 和 Twitter Cards - description = "Hugo theme - LoveIt" + description = "zyestin2" # website images for Open Graph and Twitter Cards # 网站图片, 用于 Open Graph 和 Twitter Cards - images = ["/logo.png"] + images = ["https://avatars.githubusercontent.com/u/51897571?s=40&v=4"] # Header config # 页面头部导航栏配置 @@ -131,7 +131,7 @@ ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"] logo = "" # title name # 标题名称 - name = "LoveIt" + name = "zyestin" # you can add extra information before the name (HTML format is supported), such as icons # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标 pre = "" diff --git a/public/404.html b/public/404.html index 82889a3..8dd683c 100644 --- a/public/404.html +++ b/public/404.html @@ -4,14 +4,14 @@ - 404 Page not found - zyestin - + 404 Page not found - zyestin + - + - - + + @@ -22,7 +22,7 @@
- LoveIt + zyestin
Posts Tags Categories Docs About @@ -48,7 +48,7 @@
- LoveIt + zyestin
- LoveIt + zyestin
Posts Tags Categories Docs About @@ -77,7 +77,7 @@
- LoveIt + zyestin

实现 差不多理想的极简RN弹窗

-
zyestin
+
zyestin included in react-native
   499 words   3 minutes 
@@ -487,21 +487,21 @@

How to use Aler
- Updated on 2024-01-09  - edee1a1 + Updated on 2024-04-10  + f65f9fd
Read Markdown
- +
-
 react-native
+
 best-practice, react-native
Back | Home
diff --git a/public/art-text/index.html b/public/art-text/index.html index dc76e6b..387a815 100644 --- a/public/art-text/index.html +++ b/public/art-text/index.html @@ -4,16 +4,16 @@ - 远程字体的动态加载&应用 - zyestin + 远程字体的动态加载&应用 - zyestin - + - + - + @@ -29,8 +29,8 @@ "mainEntityOfPage": { "@type": "WebPage", "@id": "https:\/\/zyestin.github.io\/zyestin\/art-text\/" - },"image": ["https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4"],"genre": "posts","keywords": "react-native","wordcount": 172 , - "url": "https:\/\/zyestin.github.io\/zyestin\/art-text\/","datePublished": "2023-11-01T12:00:11+08:00","dateModified": "2023-12-18T16:09:45+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": { + },"image": ["https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4"],"genre": "posts","keywords": "best-practice, react-native","wordcount": 172 , + "url": "https:\/\/zyestin.github.io\/zyestin\/art-text\/","datePublished": "2023-11-01T12:00:11+08:00","dateModified": "2024-04-10T19:46:17+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": { "@type": "Organization", "name": "zyestin","logo": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4"},"author": { "@type": "Person", @@ -43,7 +43,7 @@
- LoveIt + zyestin
Posts Tags Categories Docs About @@ -69,7 +69,7 @@
- LoveIt + zyestin

远程字体的动态加载&应用

-
zyestin
+
zyestin included in react-native
   172 words   One minute 
@@ -279,21 +279,21 @@

3.其中有哪些需要注意的？

- Updated on 2023-12-18  - 81d9008 + Updated on 2024-04-10  + f65f9fd
Read Markdown
- +
-
 react-native
+
 best-practice, react-native
Back | Home
diff --git a/public/base-components/index.html b/public/base-components/index.html index ee65c7c..5412898 100644 --- a/public/base-components/index.html +++ b/public/base-components/index.html @@ -4,18 +4,18 @@ - 封装常用基础组件 - zyestin + 封装常用基础组件 - zyestin - + - + - +
- LoveIt + zyestin
Posts Tags Categories Docs About @@ -73,7 +73,7 @@
- LoveIt + zyestin

封装常用基础组件

-
zyestin
+
zyestin included in react-native
   690 words   4 minutes 
@@ -639,21 +639,21 @@

使用示例

- Updated on 2024-03-14  - 10fef7b + Updated on 2024-04-10  + f65f9fd
Read Markdown
- +
-
 react-native
+
 react-native, component
Back | Home
diff --git a/public/categories/code/index.html b/public/categories/code/index.html new file mode 100644 index 0000000..c7c2356 --- /dev/null +++ b/public/categories/code/index.html @@ -0,0 +1,103 @@ + + + + + + + code - Category - zyestin + + + + + + + + + + + + + + + +
+
+
+ zyestin +
+
+
Posts Tags Categories Docs About + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ zyestin +
+ +
+ +
+
+
+
+
+
+
+

 code

2023

+
+ + + diff --git a/public/categories/code/index.xml b/public/categories/code/index.xml new file mode 100644 index 0000000..43326cb --- /dev/null +++ b/public/categories/code/index.xml @@ -0,0 +1,23 @@ + + + code - Category - zyestin + https://zyestin.github.io/zyestin/categories/code/ + code - Category - zyestin + Hugo -- gohugo.ioenzyestin@gmail.com (zyestin) + zyestin@gmail.com (zyestin)This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.Wed, 01 Nov 2023 12:00:11 +0800 + 代码规范 + https://zyestin.github.io/zyestin/code-standards/ + Wed, 01 Nov 2023 12:00:11 +0800 + zyestin + https://zyestin.github.io/zyestin/code-standards/ + + + + diff --git a/public/categories/code/page/1/index.html b/public/categories/code/page/1/index.html new file mode 100644 index 0000000..07fe692 --- /dev/null +++ b/public/categories/code/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://zyestin.github.io/zyestin/categories/code/ + + + + + + diff --git a/public/categories/index.html b/public/categories/index.html index fbc369d..83c2a39 100644 --- a/public/categories/index.html +++ b/public/categories/index.html @@ -4,14 +4,14 @@ - All Categories - zyestin - + All Categories - zyestin + - + - - + + @@ -23,7 +23,7 @@
- LoveIt + zyestin
Posts Tags Categories Docs About @@ -49,7 +49,7 @@
- LoveIt + zyestin

zyestin published on  included in react-native
MasonryFlashList 瀑布流布局列高不均 解决方案 瀑布流布局列高不均 演示效果 最终我对此做了回复 👉🏻 issues/946#issuecomment-1972392998 方法1：【仅解决了双列】58的方案 方案源码 👉🏻 https://github.com/jiangleo/react-native-classroom/blob/main/src/11_Waterfall/lib/RecyclerListView/WaterfallLayoutProvider.ts 但，只修改为了 支持双列瀑布流布局，也不是基于最新recyclerlistview版本 @@ -117,20 +117,20 @@ 方法3:【最完美】MasonryFlashList 本身支持优化排列 见官方文档 masonry#optimizeitemarrangement 1 If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false. 在看源码时，发现MasonryFlashList.tsx中，底部可见如下说明
Read More
-  react-native
+  best-practice, react-native

最佳实践 点赞(收藏等)状态的全局同步更新 -

zyestin published on
有这么一个常见的需求 在对某个帖子进行点赞后，该帖子所出现的各个地方，e.g.帖子列表(可能多处)、帖子详情(可能多个)，点赞状态实时同步、数量加/减1同步。 +
zyestin published on  included in react-native
有这么一个常见的需求 在对某个帖子进行点赞后，该帖子所出现的各个地方，e.g.帖子列表(可能多处)、帖子详情(可能多个)，点赞状态实时同步、数量加/减1同步。 iOS 方案 在iOS，我是在每个帖子 所对应的 Model(数据)对象里 监听通知，判断 帖子ID，ID匹配 则更新 点赞状态，以此达到操作点赞后 实时同步同一帖子的点赞状态，非常简单好使！ RN 方案 但RN里，数据是一个{id:xx, ...}这样的对象，是不支持像在iOS那样，在这样对象里 写监听通知的代码的。 于是，那就放到hooks去实现。 Q：那需要什么样的hooks呢？ A：也就是需要怎样的 设计最优雅的API，or调用方式 （如下），才是决定了设计什么样的hooks函数 最优雅API 调用方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 const PostComp = () => { const { isActive: liked, activeCount: likeCount, changeActiveStatus: changeLikeStatus, } = useActiveStatus({ id: id, originalActiveCount: originalLikeCount, originalActiveStatus: originalLikedStatus, notificationKey: kPostLikeStatusChangeNotification, requestFunc: ({ isActive }) => { return likePost({ postId: id, isLike: isActive }); // send request to toggle liked status }, }); return ( <View> <Icon liked={liked} /> <Text>{likeCount}</Text> <Button onPress={() => { changeLikeStatus() }} /> </View> ) } useActiveStatus这个hooks的实现源码， 如下
Read More
-  react-native
+  best-practice, react-native

第一次提交PR给react-native -

zyestin published on
用了3年RN了，第一次给RN提交PR，有点激动，值得记录呀！ +
zyestin published on  included in react-native
用了3年RN了，第一次给RN提交PR，有点激动，值得记录呀！ 操作记录 git操作全在github完成 2023.12.05 7:52PM 提交 fork -> 创建分支 -> 改代码 -> 提交 然后进入pull request tab ，就能看到Compare & pull request入口，点击它 @@ -148,25 +148,25 @@ 等待下一个版本被推出的时候咯 待续~
Read More
-  react-native
+  contribution, react-native

实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画 -

zyestin published on
ScrollView滚动动画 实现起来就很容易 +
zyestin published on  included in react-native
ScrollView滚动动画 实现起来就很容易 源码 展开查看 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 import React, { useRef, useEffect } from "react"; import { ScrollView, Text, View, Animated, Easing } from "react-native"; /** * ScrollView自动滚动了！ */ const AutoScrollScrollView = () => { const scrollViewRef = useRef(); const scrollY = useRef(new Animated.
Read More
 react-native

hooks开发工具 -

zyestin published on
常用hooks依赖检查，从源头提醒避免奇葩bug https://github.com/facebook/react/issues/14920 +
zyestin published on  included in react
常用hooks依赖检查，从源头提醒避免奇葩bug https://github.com/facebook/react/issues/14920 ESLint提供，检查useEffect依赖 && autoFix， 用上后 估计能大大降低 无法获取state最新值、漏掉依赖后奇怪的bug
Read More
-  react-native
+  react, tool
  • 1 diff --git a/public/index.json b/public/index.json index 1a2af00..059ca52 100644 --- a/public/index.json +++ b/public/index.json @@ -1 +1 @@ -[{"categories":null,"content":"MasonryFlashList 瀑布流布局列高不均 解决方案 瀑布流布局列高不均 演示效果 最终我对此做了回复 👉🏻 issues/946#issuecomment-1972392998 ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:0:0","tags":["react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":null,"content":"方法1：【仅解决了双列】58的方案 方案源码 👉🏻 https://github.com/jiangleo/react-native-classroom/blob/main/src/11_Waterfall/lib/RecyclerListView/WaterfallLayoutProvider.ts 但，只修改为了 支持双列瀑布流布局，也不是基于最新recyclerlistview版本 58大佬分析的 recyclerlistview的布局原理，Nice ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:1:0","tags":["react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":null,"content":"方法2：【较完美的】Masonry layout manager and provider #526 方案 可惜，并没有被merge，作者似乎不再关注这个项目了。 然后，也没有提供patch，但有人提供了package 和 Demo，非常赞！ 👉🏻 方案来源 package: recyclerlistview-masonrylayoutmanager Demo: https://snack.expo.dev/@robertli93/grid_example Demo效果非常棒！ 滚动流畅 + 布局均匀 为何未被合并？ 难道是因为PR评论区的已知小bug？还是作者不再维护？ ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:2:0","tags":["react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":null,"content":"方法3:【最完美】MasonryFlashList 本身支持优化排列 见官方文档 masonry#optimizeitemarrangement If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false. 在看源码时，发现MasonryFlashList.tsx中，底部可见如下说明 * FlashList variant that enables rendering of masonry layouts. * If you want `MasonryFlashList` to optimize item arrangement, enable `optimizeItemArrangement` and pass a valid `overrideItemLayout` function. optimize Item Arrangement，即 优化Item的布置/排列 布局规则 核心代码 默认分配规则 columnCount列，对应dataSet下有多少个数组，对应有多少个FlashList dataSet下各数组(各列表数据) 是根据i % columnCount在数量上公平分配的 optimizeItemArrangement 排列规则 optimizeItemArrangement，则改为 基于列高度累计上公平分配。 每次分配前，通过columnHeightTracker[j] \u003c columnHeightTracker[nextColumnIndex]判断，每次把Item分配给 高度累计最少的那一列 基于此，做如下改动 对底层封装组件BaseList，增加 入参 - 高度计算函数sizeForItem 注意：其中还为dataList中的各个元素 增加了cache键，用于缓存各种计算值 附: BaseList源码 👉🏻 base 在Item组件中，增加 高度计算函数实现 export const sizeForItem = (item) =\u003e { const { previewUri, title, tags, cache } = item; console.log(\"item.cache:\", item.cache); //使用缓存高度，避免重复计算，减少性能消耗 if (cache[kHeightCacheKey]) return cache[kHeightCacheKey] + px2dp(15); let imageHeight = getHeightFromSize(parseSize(previewUri)) || imageSize; cache[kImageHeightCacheKey] = imageHeight; let titleH = getHeightWithText({ text: title, fontSize: styles.title.fontSize, lineHeight: styles.title.lineHeight, maxNumberOfLines: 2, maxWidth: cellWidth - styles.title.paddingHorizontal * 2, }); cache[kTitleHeightCacheKey] = titleH; let totalH = Math.ceil(imageHeight) + cellBorderWidth * 2 + Math.ceil(styles.title.marginTop) + Math.ceil(titleH) + Math.ceil(tags?.[0] ? px2dp(5) : 0) + Math.ceil(tags?.[0] ? px2dp(20) : 0) + Math.ceil(px2dp(30)); cache[kHeightCacheKey] = totalH; return totalH + px2dp(15); }; 注意: 实际上， 组件自适应高度 与 计算所得高度 有点偏差，会导致列表数据刷多了后，仍会出现两列分布不均 于是，上面代码中每个(带text的)组件高度计算后，需要向上取整，比如 23.3 -\u003e 24 并且，将计算的各组件高度，缓存到cache对象中，并且将使用这些值 设为组件style中的height 这样就避免了 组件自适应高度 与 计算高度 之间的偏差！！ 另外， 调用sizeForItem时，优先使用缓存高度，避免重复计算，减少性能消耗 附: 1种Item使用源码 👉🏻 ImageTextFeed 高度计算对比了2个，发现58的方案更好 源码: https://github.com/jiangleo/react-native-classroom/blob/d09d5a6937f9e8b3b9878566e6a251a814705739/src/12_HomePage/utils/getNumberOfLine.ts#L32 ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:3:0","tags":["react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":null,"content":"有这么一个常见的需求 在对某个帖子进行点赞后，该帖子所出现的各个地方，e.g.帖子列表(可能多处)、帖子详情(可能多个)，点赞状态实时同步、数量加/减1同步。 ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:0:0","tags":["react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":null,"content":"iOS 方案 在iOS，我是在每个帖子 所对应的 Model(数据)对象里 监听通知，判断 帖子ID，ID匹配 则更新 点赞状态，以此达到操作点赞后 实时同步同一帖子的点赞状态，非常简单好使！ ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:1:0","tags":["react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":null,"content":"RN 方案 但RN里，数据是一个{id:xx, ...}这样的对象，是不支持像在iOS那样，在这样对象里 写监听通知的代码的。 于是，那就放到hooks去实现。 Q：那需要什么样的hooks呢？ A：也就是需要怎样的 设计最优雅的API，or调用方式 （如下），才是决定了设计什么样的hooks函数 ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:2:0","tags":["react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":null,"content":"最优雅API 调用方式 const PostComp = () =\u003e { const { isActive: liked, activeCount: likeCount, changeActiveStatus: changeLikeStatus, } = useActiveStatus({ id: id, originalActiveCount: originalLikeCount, originalActiveStatus: originalLikedStatus, notificationKey: kPostLikeStatusChangeNotification, requestFunc: ({ isActive }) =\u003e { return likePost({ postId: id, isLike: isActive }); // send request to toggle liked status }, }); return ( \u003cView\u003e \u003cIcon liked={liked} /\u003e \u003cText\u003e{likeCount}\u003c/Text\u003e \u003cButton onPress={() =\u003e { changeLikeStatus() }} /\u003e \u003c/View\u003e ) } useActiveStatus这个hooks的实现源码， 如下 ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:2:1","tags":["react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":null,"content":"源码 把iOS Model里的通知 放到hooks函数里，如下 源码useActiveStatus import { useEffect, useState } from \"react\"; import { listen, emit } from \"app/utils/Notification/index\"; /** * 0 1 状态管理工具 * @param {function} id 目标对象id * @param {string} props.notificationKey active状态变化时 发出通知名称 * @param {boolean} props.originalActiveCount 初始active数量 * @param {boolean} props.originalActiveStatus 初始active状态 * @param {function} props.requestFunc({id, isActive}) active状态变更函数 * @returns {boolean} isActive * @returns {number} activeCount * @returns {function} changeActiveStatus() */ export default function useActiveStatus(props) { const { notificationKey, originalActiveCount, originalActiveStatus, requestFunc, id, } = props; const [isActive, setIsActive] = useState(originalActiveStatus); const [activeCount, setActiveCount] = useState(originalActiveCount); useEffect(() =\u003e { setIsActive(originalActiveStatus); }, [originalActiveStatus, id]); useEffect(() =\u003e { setActiveCount(originalActiveCount); }, [originalActiveCount, id]); useEffect(() =\u003e { const listener = listen(notificationKey, ({ id: _id, isActive }) =\u003e { // console.log(\"useActiveStatus:\", isActive); if (_id == id) { if (isActive) { setActiveCount(activeCount + 1); } else { setActiveCount(activeCount - 1 \u003e= 0 ? activeCount - 1 : 0); } setIsActive(isActive); } }); return () =\u003e { listener.remove(); }; }, [isActive, requestFunc, notificationKey, id, activeCount]); const changeActiveStatus = () =\u003e { return requestFunc({ isActive }).then((res) =\u003e { console.log(\"changeFollowStatus:\", notificationKey, id, !isActive); emit(notificationKey, { id: id, isActive: !isActive, }); return Promise.resolve(); }); }; return { isActive, activeCount, changeActiveStatus, }; } ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:2:2","tags":["react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":null,"content":"用了3年RN了，第一次给RN提交PR，有点激动，值得记录呀！ ","date":"2023-12-18","objectID":"/zyestin/rn-pull-request/:0:0","tags":["react-native"],"title":"第一次提交PR给react-native","uri":"/zyestin/rn-pull-request/"},{"categories":null,"content":"操作记录 git操作全在github完成 2023.12.05 7:52PM 提交 fork -\u003e 创建分支 -\u003e 改代码 -\u003e 提交 然后进入pull request tab ，就能看到Compare \u0026 pull request入口，点击它 生成的PR地址： https://github.com/facebook/react-native/pull/41803 然后就进入 PR描述编辑区，按提示编辑完，提交即可 首次提交PR，提示需要签署CLA 跳转到这里 https://github.com/facebook/react-native/pull/41803/checks?check_run_id=19326140445 再打开 https://code.facebook.com/cla， 进行签署CLA 签署后，这个页面就进入一个无法编辑的状态，虽然顶部有提示，如果在签CLA之前已经提交了一个，再耐心等待会，会自动处理的 👉🏻这个友人的经历是很好的借鉴 于是，从21:49，等啊等，到了 23:54，才有反馈 第二天早上一看 10:13，还给了我建议，我点击一下 Commit suggestion就ok了 最后就差maintainer批准了 一般多久批准呢？ 浏览了2个merged的PR，都是2天 2023.12.13 11:24PM 终于收到邮件 PR被合并 This pull request was successfully merged by @zyestin in 5217cc9. 并且紧接着收到邮件 PR被关闭 Closed #41803 via 5217cc9. 那何时 带有我贡献的代码 会被发布呢？ 等待下一个版本被推出的时候咯 待续~ ","date":"2023-12-18","objectID":"/zyestin/rn-pull-request/:1:0","tags":["react-native"],"title":"第一次提交PR给react-native","uri":"/zyestin/rn-pull-request/"},{"categories":null,"content":"ScrollView滚动动画 实现起来就很容易 源码 展开查看 import React, { useRef, useEffect } from \"react\"; import { ScrollView, Text, View, Animated, Easing } from \"react-native\"; /** * ScrollView自动滚动了！ */ const AutoScrollScrollView = () =\u003e { const scrollViewRef = useRef(); const scrollY = useRef(new Animated.Value(0)).current; const contentHeight = 1000; // 你的内容高度 const scrollDuration = 5000; // 滚动动画的持续时间（毫秒） useEffect(() =\u003e { const startScrollAnimation = () =\u003e { Animated.timing(scrollY, { toValue: contentHeight, duration: scrollDuration, easing: Easing.linear, useNativeDriver: false, }).start(() =\u003e { // 滚动到顶部并重新开始动画 scrollY.setValue(0); startScrollAnimation(); }); }; startScrollAnimation(); }, []); return ( \u003cScrollView ref={scrollViewRef} contentContainerStyle={{ height: contentHeight }} onScroll={(event) =\u003e { const offsetY = event.nativeEvent.contentOffset.y; // 可以在滚动时执行一些其他操作 }} scrollEventThrottle={16} \u003e \u003cAnimated.View style={{ height: contentHeight, transform: [{ translateY: scrollY }], }} \u003e \u003cText\u003eScrolling Content\u003c/Text\u003e {/* 这里可以放置你的滚动内容 */} \u003c/Animated.View\u003e \u003c/ScrollView\u003e ); }; export default AutoScrollScrollView; ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-autoscroll/:1:0","tags":["react-native"],"title":" 实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画","uri":"/zyestin/waterfall-list-autoscroll/"},{"categories":null,"content":"非ScrollView类的列表 滚动动画 然而，FlatList 、flashList、masonryFlashList要实现自动滚动动画， 却用不了ScrollView同样的方式，实现起来就很曲折，经过各种尝试均失败，无奈，使用定时器方式实现了， 效果图： 源码如下 import React, { useRef, useEffect, useState } from \"react\"; import { FlatList, View, Text } from \"react-native\"; import { MasonryFlashList } from \"@shopify/flash-list\"; const data = Array.from({ length: 20 }, (_, index) =\u003e ({ key: index.toString(), text: `Item ${index}`, })); const renderItem = ({ item }) =\u003e ( \u003cView style={{ height: 100, justifyContent: \"center\", alignItems: \"center\", }} \u003e \u003cText\u003e{item.text}\u003c/Text\u003e \u003c/View\u003e ); const SlowScrollFlatList = ({ duration }) =\u003e { const flatListRef = useRef(); const scrollDistance = 2; // 控制每次滚动的距离 const scrollInterval = 20; // 每次滚动之间的间隔时间（毫秒） const [isDragging, setIsDragging] = useState(false); const scrollIntervalId = useRef(null); const currentScrollDistance = useRef(0); const totalScrollDistance = 100 * (data.length - 1); const scroll = () =\u003e { if (currentScrollDistance.current \u003c totalScrollDistance \u0026\u0026 !isDragging) { const nextDistance = Math.min( totalScrollDistance, currentScrollDistance.current + scrollDistance ); flatListRef.current.scrollToOffset({ offset: nextDistance, animated: false, }); currentScrollDistance.current = nextDistance; } }; const startAutoScroll = () =\u003e { scrollIntervalId.current = setInterval(scroll, scrollInterval); }; // 监听FlatList的滚动位置 const onScroll = (event) =\u003e { currentScrollDistance.current = event.nativeEvent.contentOffset.y; }; useEffect(() =\u003e { const stopAutoScroll = () =\u003e { clearInterval(scrollIntervalId.current); }; flatListRef.current.scrollToOffset({ offset: currentScrollDistance.current, animated: false, }); startAutoScroll(); // 初始启动自动滚动 return () =\u003e { stopAutoScroll(); }; }, [isDragging]); return ( // \u003cFlatList // ref={flatListRef} // data={data} // renderItem={renderItem} // keyExtractor={(item) =\u003e item.key} // onScrollBeginDrag={() =\u003e setIsDragging(true)} // onScrollEndDrag={() =\u003e { // setIsDragging(false); // startAutoScroll(); // 用户停止拖动后，重新启动自动滚动 // }} // onScroll={onScroll} // // 设置其他 FlatList 的属性 // /\u003e \u003cMasonryFlashList ref={flatListRef} estimatedItemSize={/* itemStyles.container.height */ 100} data={data} keyExtractor={(item, index) =\u003e item?.key} initialNumToRender={5} numColumns={2} renderItem={renderItem} showsVerticalScrollIndicator={false} onScrollBeginDrag={() =\u003e setIsDragging(true)} onScrollEndDrag={() =\u003e { setIsDragging(false); startAutoScroll(); // 用户停止拖动后，重新启动自动滚动 }} onScroll={onScroll} /\u003e ); }; export default SlowScrollFlatList; 核心逻辑： 每间隔 scrollInterval ms，滚动 scrollDistance 小步距离 当 scrollInterval足够小，在1/60s 即16ms左右时，就类似于流畅的每秒60帧动画了 根据实际的效果，调节scrollInterval 、scrollDistance 大小，使达到满意的效果 ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-autoscroll/:2:0","tags":["react-native"],"title":" 实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画","uri":"/zyestin/waterfall-list-autoscroll/"},{"categories":null,"content":"实际场景应用 请前往 慢速自动滚动的横向瀑布流列表 ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-autoscroll/:2:1","tags":["react-native"],"title":" 实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画","uri":"/zyestin/waterfall-list-autoscroll/"},{"categories":null,"content":"常用hooks依赖检查，从源头提醒避免奇葩bug https://github.com/facebook/react/issues/14920 ESLint提供，检查useEffect依赖 \u0026\u0026 autoFix， 用上后 估计能大大降低 无法获取state最新值、漏掉依赖后奇怪的bug ","date":"2023-11-01","objectID":"/zyestin/tool-dev-react/:1:0","tags":["react-native"],"title":"hooks开发工具","uri":"/zyestin/tool-dev-react/"},{"categories":null,"content":" patch-package 补丁工具使用 ","date":"2023-11-01","objectID":"/zyestin/tool-npm/:0:0","tags":["react-native"],"title":"npm 工具","uri":"/zyestin/tool-npm/"},{"categories":null,"content":"patch-package 官方地址 https://www.npmjs.com/package/patch-package ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:0:0","tags":["react-native"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":null,"content":"首次安装 失败\u0026\u0026解决 package.json内scripts下 添加 \"postinstall\": \"patch-package\" 安装，失败 npm i patch-package 10:18:05 npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED npm ERR! FetchError: request to https://mirrors.huaweicloud.com/repository/npm/patch-package failed, reason: connect ECONNREFUSED 127.0.0.1:1087 npm ERR! at ClientRequest.\u003canonymous\u003e (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) npm ERR! at ClientRequest.emit (events.js:400:28) npm ERR! at onerror (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:101:9) npm ERR! at callbackError (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:123:5) npm ERR! at processTicksAndRejections (internal/process/task_queues.js:95:5) npm ERR! FetchError: request to https://mirrors.huaweicloud.com/repository/npm/patch-package failed, reason: connect ECONNREFUSED 127.0.0.1:1087 npm ERR! at ClientRequest.\u003canonymous\u003e (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) npm ERR! at ClientRequest.emit (events.js:400:28) npm ERR! at onerror (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:101:9) npm ERR! at callbackError (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:123:5) npm ERR! at processTicksAndRejections (internal/process/task_queues.js:95:5) { npm ERR! type: 'system', npm ERR! errno: 'ECONNREFUSED', npm ERR! code: 'ECONNREFUSED' npm ERR! } npm ERR! npm ERR! If you are behind a proxy, please make sure that the npm ERR! 'proxy' config is set properly. See: 'npm help config' npm ERR! A complete log of this run can be found in: npm ERR! /Users/yestin/.npm/_logs/2022-07-14T02_30_35_701Z-debug.log ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:1:0","tags":["react-native"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":null,"content":"搜 https://segmentfault.com/a/1190000023314583 solution: # 配置指向源 $ npm config set registry http://registry.npm.taobao.org 配置前 ~/workspace/ihuaben-app dev_zy_i *2 !1 \u003e npm config list 1m 12s 10:34:40 ; cli configs metrics-registry = \"https://mirrors.huaweicloud.com/repository/npm/\" scope = \"\" user-agent = \"npm/6.14.15 node/v14.18.3 darwin x64\" ; userconfig /Users/yestin/.npmrc home = \"https://npm.taobao.org\" registry = \"https://mirrors.huaweicloud.com/repository/npm/\" ; node bin location = /usr/local/bin/node ; cwd = /Users/yestin/workspace/ihuaben-app ; HOME = /Users/yestin ; \"npm config ls -l\" to show all defaults. 配置后 npm config list 10:39:05 ; cli configs metrics-registry = \"http://registry.npm.taobao.org/\" scope = \"\" user-agent = \"npm/6.14.15 node/v14.18.3 darwin x64\" ; userconfig /Users/yestin/.npmrc home = \"https://npm.taobao.org\" registry = \"http://registry.npm.taobao.org/\" ; node bin location = /usr/local/bin/node ; cwd = /Users/yestin/workspace/ihuaben-app ; HOME = /Users/yestin ; \"npm config ls -l\" to show all defaults. 然后 安装成功 npm i patch-package 10:39:10 npm WARN @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.14.5 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself. npm WARN @babel/plugin-proposal-class-static-block@7.14.5 requires a peer of @babel/core@^7.12.0 but none is installed. You must install peer dependencies yourself. npm WARN @react-native-community/cameraroll@1.2.1 requires a peer of react-native@\u003e=0.57 \u003c=0.59 but none is installed. You must install peer dependencies yourself. ... + patch-package@6.4.7 added 12 packages from 23 contributors and removed 153 packages in 40.037s 52 packages are looking for funding run `npm fund` for details yarn yarn add patch-package postinstall-postinstall 41s 10:40:04 yarn add v1.22.19 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] 🔍 Resolving packages... info There appears to be trouble with your network connection. Retrying... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning \"hox \u003e react-reconciler@0.25.1\" has incorrect peer dependency \"react@^16.13.1\". warning \" \u003e mobx-react@5.3.5\" has unmet peer dependency \"mobx@^4.0.0 || ^5.0.0\". warning \" \u003e react-native-elements@3.4.2\" has unmet peer dependency \"react-native-safe-area-context@^3.1.9\". warning \" \u003e react-native-elements@3.4.2\" has incorrect peer dependency \"react-native-vector-icons@\u003e7.0.0\". warning \" \u003e react-native-fs@2.18.0\" has unmet peer dependency \"react-native-windows@*\". warning \" \u003e react-native-head-tab-view@2.1.7\" has incorrect peer dependency \"@react-native-community/viewpager@^3.3.0\". warning \" \u003e react-native-iap@6.2.1\" has incorrect peer dependency \"react@\u003e=16.13.1\". warning \"react-native-router-flux \u003e react-navigation-stack@1.10.3\" has incorrect peer dependency \"react-native-screens@^1.0.0 || ^1.0.0-alpha\". warning \" \u003e react-native-selfadapt-modal@1.1.3\" has incorrect peer dependency \"react-native@^0.41.2\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/eslint-plugin@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/parser@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react@7.12.4\" has incorrect peer dependency \"eslint@^3.0.0 || ^4.0.0 || ^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react-native@3.6.0\" has incorrect peer dependency \"eslint@^3.17.0 || ^4 || ^5\". [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 10 new dependencies. info Direct dependencies ├─ patch-package@6.4.7 ├─ postinstall-postinstall@2.1.0 ├─ react-native-gesture-handler@1.10.3 └─ react-native-head-tab","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:2:0","tags":["react-native"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":null,"content":"优势 一人 操作下面3步，其它人完全无感知，npm i时 自动完成补丁的应用 //package.json \"scripts\": { + \"postinstall\": \"patch-package\" } npm i patch-package npx patch-package libxx ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:3:0","tags":["react-native"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":null,"content":"遇到过的bug ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:4:0","tags":["react-native"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":null,"content":"执行npm i，react-native-image-crop-picker+0.38.0.patch apply会失败 方法1 删三方库重新安装（较快） rm -rf node_modules/react-native-image-crop-picker \u0026\u0026 npm i 方法2 于是照着react-native-image-crop-picker+0.38.0.patch改文件里的源码，再次执行 npx patch-package react-native-image-crop-picker --include 'PickerModule.java' 发现react-native-image-crop-picker+0.38.0.patch什么也没改 然后执行npm i就成功了 后来发现原因，如下，.patch文件中，会出现好多行 带有绝对路径/Users/...的文件路径 -#Wed Jun 29 16:49:45 CST 2022 -/Users/lsye/ihuaben-app/node_modules/react-native-picker/android/src/main/res/layout/picker_view_linkage.xml=/Users/lsye/ihuaben-app/node_modules/react-native-picker/android/build/intermediates/packaged_res/debug/layout/picker_view_linkage.xml ... 可能是同事执行时，出现异常情况了 ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:4:1","tags":["react-native"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":null,"content":"执行npx patch-package react-native-xx, .patch会出现许多多余的文件字符串 ... index 408362c..5fd7d55 100644 Binary files a/node_modules/react-native-picker/android/build/intermediates/runtime_library_classes/release/classes.jar and b/node_modules/react-native-picker/android/build/intermediates/runtime_library_classes/release/classes.jar differ diff --git a/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/.DS_Store b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/.DS_Store new file mode 100644 index 0000000..7a08108 Binary files /dev/null and b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/.DS_Store differ diff --git a/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java index c52b1a7..7990d96 100644 --- a/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java +++ b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java @@ -10,6 +10,10 @@ final class OnItemSelectedRunnable implements Runnable { @Override public final void run() { - loopView.onItemSelectedListener.onItemSelected(loopView.getSelectedItem(),loopView.getSelectedIndex()); + try { + loopView.onItemSelectedListener.onItemSelected(loopView.getSelectedItem(), loopView.getSelectedIndex()); + } catch (Exception e) { + e.printStackTrace(); + } } } 原因是 安卓build之后的产物，在执行npx patch-package ...时 被莫名其妙带进去了 解决方案 方法1 可以把改后的文件拷贝出来，将三方库删了重装，再覆盖 拷贝的文件，再执行npx patch-package ... 方法2 使用绝对路径 npx patch-package react-native-xx --include 'file1|file2' ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:4:2","tags":["react-native"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":null,"content":"\u2028","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:0:0","tags":["react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":null,"content":"插件 代码智能提示 copilot 触发内联建议 Option (⌥)+\\ https://docs.github.com/zh/copilot/configuring-github-copilot/configuring-github-copilot-in-your-environment?tool=vscode#keyboard-shortcuts-for-macos (键联提示)代码片段 ES7+ React/Redux/React-Native snippets massCode assistant (配合打开massCode App使用) 标签修改 自动首尾同步 Auto Rename Tag 拼写检测 Code Spell Checker 格式化 prettier 提升阅读感受 Gitlens 悬停查看代码改动人 Material Icon Theme / vscode-icons 侧边导航区 目录展示icon indent-rainbow 标签开闭连线 Image Preview 在图片路径引用行 左侧展示icon ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:1:0","tags":["react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":null,"content":"code snippets React/Redux/React-Native snippets 指令说明： https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md 优点： 对常用的hooks支持的简直完美 可以试试输入useeff...。 会提示useEffectSnippet，enter后挨个填词，tab切换光标，set方法自动驼峰，简直完美！ 使用rnfes创建组件，会根据文件名 命名组件 想根据英文记忆一下快捷指令名称，可以参考 Fullstack React/React Native snippets 对快捷指令 都有英文解释 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:2:0","tags":["react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":null,"content":"Mac、VSC快捷键 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:3:0","tags":["react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":null,"content":"Mac 系统自带 (shift+) ctrl+ (option+\u0010\u000e) f/b (shift+) ctrl+ p/n VSC 更改了上述快捷键对应的指令，非常糟糕。可以调整下如下 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:3:1","tags":["react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":null,"content":"VSC Next Change （Important） terminal、editor互切 focus到终端: cmd+j focus到editor: (ctrl+)shift+tab cmd+1 光标移动到函数头尾、标签头尾 cmd+shift+\\: 跳转至{ }、跳转至\u003c \u003e 选中 括号内代码 支持不断 扩张/收缩 选中 { \"key\": \"ctrl+s\", \"command\": \"editor.action.smartSelect.expand\", \"when\": \"editorTextFocus\" }, { \"key\": \"ctrl+shift+s\", \"command\": \"editor.action.smartSelect.shrink\", \"when\": \"editorTextFocus\" }, 光标移动多行 插件line-jumper 配成(shift+)ctrl+option+p/n 插件Space Block Jumper 跳转到临近的空行(选中) 居然无法设置 这几个键组合ctrl+cmd+p Next Problem cmd+(shift+)' 常用于写代码时要import，故意写error，然后在顶部import结束后，再快速跳回error处继续写代码 导航区(explorer view)定位当前编辑文件 { \"key\": \"shift+cmd+j\", \"command\": \"workbench.files.action.showActiveFileInExplorer\", \"when\": \"editorFocus\" } 其它更改VSCode的自定义快捷键 更新于 2023.07.26 keybindings 这是一份我常用的、好用的VSC自定义快捷键备份。 为什么要改？ 因为，当Mac的快捷键与VSC冲突时，当好用的插件快捷键与VSC冲突时，当VSC自带的快捷键失灵时，一般就需要更改VSC的 keybindings.json文件了 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:3:2","tags":["react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":null,"content":"一些业务的最佳实践探索 基础组件封装 瀑布流列表base组件 图片base组件 … 实现 模仿抖音、小红书 输入 #标签 高亮 瀑布流列表 瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存 实现 瀑布流列表·自动滚动动画 实现 横向·瀑布流列表 实现 仿抖音/小红书 对贴图/贴字 进行拖拽、缩放、旋转等复杂手势 封装一个 易用的、远程字体动态下载\u0026应用组件 封装一个 低耦合、易用的文本输入框弹窗 实现 差不多理想的极简RN弹窗 最佳实践 点赞(收藏等)状态的全局同步更新 实践 列表Item精确曝光埋点 [todo] 实践 多tab多列表滑动吸顶效果 [todo] 实践 服务端下发自定义组件代码 前端接收\u0026渲染[todo] 实践 拆包 [todo] ","date":"2023-11-01","objectID":"/zyestin/readme/:1:0","tags":["react-native"],"title":"React Native 开发沉淀","uri":"/zyestin/readme/"},{"categories":null,"content":"组件库 易用的应用远程字体的text组件库 - react-native-remote-font ","date":"2023-11-01","objectID":"/zyestin/readme/:2:0","tags":["react-native"],"title":"React Native 开发沉淀","uri":"/zyestin/readme/"},{"categories":null,"content":"其它（提效、工具、学习…) 探究 代码规范 React Native 编码提效 on VSCode 用脚手架 制作一个RN库 放npm(含踏坑记录) 贡献给react-native的第一个PR React学习收获 学习《React Hooks 核心原理与实战》笔记 常用hooks依赖检查，从源头提醒避免奇葩bug … npm 好用工具 patch-package 补丁工具使用 … 从0到1用Jenkins实现对RN项目一键打包、发布 ","date":"2023-11-01","objectID":"/zyestin/readme/:3:0","tags":["react-native"],"title":"React Native 开发沉淀","uri":"/zyestin/readme/"},{"categories":null,"content":" 学习《React Hooks 核心原理与实战》笔记 hooks开发工具 常用hooks依赖检查，从源头提醒避免奇葩bug[todo] … ","date":"2023-11-01","objectID":"/zyestin/course-react/:0:0","tags":["react-native"],"title":"React 学习","uri":"/zyestin/course-react/"},{"categories":null,"content":"需求 仿抖音、小红书，图片视频编辑区，贴图、贴文字功能 View支持拖拽 View右下角有一个icon比较特殊，该icon可控制View缩放 icon随手指移动 View缩放（以View中心点为圆心） View会旋转（以View为中心点为圆心） icon位置一直保持在View右下角 View支持双指捏 进行缩放 效果图 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:1:0","tags":["react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":null,"content":"源码 HBMultiGestureView.js calculator.js CornerToolGestureView.js ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:0","tags":["react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":null,"content":"解读 HBMultiGestureView.js 使用的什么手势api？ 通过PanResponder为Animted.View添加手势 将不同的手势操作 处理为拖拽、旋转、缩放等UI表现，从哪着手？ 通过手势回调onPanResponderGrant、onPanResponderMove、onPanResponderRelease去 如何判断 确定是否操作的右下角特殊icon视图？ 右下角icon onLoad后，拿到target，通过入参rotateScaleTargetRef传递给HBMultiGestureView，HBMultiGestureView内 通过手势回调参数中的e.nativeEvent.target获取所操作的视图target，比较判断是否相等 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:1","tags":["react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":null,"content":"解读 calculator.js 里面都是公式函数，用在HBMultiGestureView.js 中，处理这些核心计算： 计算两指连成的直线移动后的 角度， 从而确定 双指操作时的旋转角度 计算两指移动后与移动前相比 两指连线的倍数关系， 从而确定 双指操作时的放大倍数 计算A点、初始触摸位置B点、当前触摸位置C点，计算AC/AB放大比例， 从而确定单指拖动右下角按钮时的放大倍数 注：A点，即触摸开始时 视图的中心位置 计算向量AC与AB的夹角， 从而确定单指拖动右下角按钮时的旋转角度 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:2","tags":["react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":null,"content":"解读 CornerToolGestureView.js CornerToolGestureView，是四个角落携带工具按钮的手势视图 基于HBMultiGestureView封装的，所以开发时真正用的是这个CornerToolGestureView HBMultiGestureView就类似一个三方库，不是面向具体业务的，俗话说就是，开发时直接用它去组装UI 不够简单，于是封装为更好用的组件CornerToolGestureView，用于各个地方。 就像是react-native-fast-image，我们并不在开发功能时直接用它，往往会对这个三方组件封装一层(e.g.增加了设置error占位图能力)，再去用于各个地方，比如 我们封装的图片base组件 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:3","tags":["react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":null,"content":"Jenkins for iOS（第二次搭建记录） ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:0:0","tags":["react-native"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":null,"content":"运行环境搭建（简略版） 下载 jenkins.war jdk8 运行jenkins 首次设置账户信息（备忘） 账户: admin 密码: admin ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:1:0","tags":["react-native"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":null,"content":"建Job \u0026 配置 建第一个Job 设置Git 添加git 地址 添加ssh凭据【注意】 账号：生成ssh时的邮箱(~/.ssh/id_rsa.pub 最末尾可见） 密码：ssh秘钥（取于 ~/.ssh/id_rsa） 配置 脚本 #!/bin/bash -il echo 'Hi, start building ...' pwd whoami export LANG=en_US.UTF-8 export LANGUAGE=en_US.UTF-8 export LC_ALL=en_US.UTF-8 #工程环境路径 workspace_path=. #项目名称 project_name=myApp #ipa 所存放的文件夹 ipaPath=\"ipa\" echo \"第一步，更新库文件\" yarn cd ios /usr/local/bin/pod install --verbose --no-repo-update echo \"第二步，清除缓存文件....................\" xcodebuild clean rm -rf archive rm -f $ipaPath/$project_name.ipa echo \"第三步，设置打包环境，准备开始打ipa包....................\" #sed -i '' 's/\\app-store\\\u003c\\/string\\\u003e/\\ad-hoc\\\u003c\\/string\\\u003e/' archieveOpt.plist #sed -i '' 's/ProvisioningStyle = Automatic;/ProvisioningStyle = Manual;/' $project_name.xcodeproj/project.pbxproj echo \"第四步，执行编译生成.app命令\" #解决main.jsbundle找不到的问题 yarn build:ios xcodebuild archive -workspace $project_name.xcworkspace -scheme $project_name -configuration Release -archivePath archive/$project_name.xcarchive #CODE_SIGN_IDENTITY=\"iPhone Distribution: Beijing Maihuo Technology Co., Ltd. (HFNWKQ65UU)\" PROVISIONING_PROFILE_SPECIFIER=\"093cc99a-e0ce-47fb-a14d-ba1a0f5a290d.mobileprovision\" echo \"第五步，执行编译生成.ipa命令\" xcodebuild -exportArchive -exportOptionsPlist archieveOpt.plist -archivePath archive/$project_name.xcarchive -exportPath $ipaPath -configuration Release #改名 “我的应用.ipa” 为 \"myApp.ipa\" mv ${ipaPath}/*.ipa ${ipaPath}/${project_name}.ipa echo \"第六步，上传ipa到蒲公英\" curl -F \"file=@${ipaPath}/${project_name}.ipa\" -F \"uKey=get_uKey_from_pgyer\" -F \"_api_key=get_api_key_from_pgyer\" https://www.pgyer.com/apiv1/app/upload 其中，脚本的最后部分是 上传蒲公英。参照蒲公英官网教程获取 get_uKey_from_pgyer，get_api_key_from_pgyer 去吧。 到这里就可以结束了。当然，如果定制更多功能，优化流程，可以继续看下去。 配置 钉钉通知 参考: Jenkins配置钉钉通知 按照👆钉钉群里机器人的设置，挨个配置到jenkins的钉钉通知插件里👇 然后，对某个Job添加 钉钉通知👇 配置 build前选择tag 安装 Git Parameter插件 然后往Job里设置 最后，可以愉快的使用了，简单傻瓜式点击，即可实现 拉取对应tag代码、打包、上传到蒲公英，并且通知到钉钉群了。 ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:2:0","tags":["react-native"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":null,"content":"错误记录 Q：两个Job首次在jenkins执行build，均出现 打包失败 diff: /Podfile.lock: No such file or directory diff: /Manifest.lock: No such file or directory error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation. ** ARCHIVE FAILED ** R: 通过ios/Pods/ 可以发现，三方库不全。往往需要多试几次，才能集成完。 A: 第二次执行build，就ok了 Q：上传蒲公英失败 curl: (26) Failed to open/read local data from file/application Action: 去 /用户/yestin/.jenkins/workspace目录下，发现ios/下的ipa文件名是 我的应用.ipa，并不是myApp.ipa，莫非是这个影响？ 果然就是。因为xcodebuild -exportArchive不支持直接对ipa包命名，可能要结合Xcode某个设置。 A: 先找简单方法解决吧👇，命令 更改文件名 #改名 “我的应用.ipa” 为 \"myApp.ipa\" mv ${ipaPath}/*.ipa ${ipaPath}/${project_name}.ipa echo \"第六步，上传ipa到蒲公英\" curl -F \"file=@${ipaPath}/${project_name}.ipa\" -F \"uKey=e2ff6a115f6763483e2559741d20e06f\" -F \"_api_key=3352a89fc193379c982ae1ad51444103\" https://www.pgyer.com/apiv1/app/upload ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:3:0","tags":["react-native"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":null,"content":"其它 这哥们 提供了较详细的脚本，要做的更复杂可以参考下~ ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:4:0","tags":["react-native"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":null,"content":"讨论背景 相信大家写代码时 对自己都有一些要求，比如下面的 基本期望：写出他人能容易看懂的代码 更高追求：写出他人看起来很爽的代码 每经历一个阶段，大家都对编码有不同程度的进步提升，可以分享；同时也会积累一些场景下代码如屎的烦恼，想要破局。 于是，阶段性的，需要一个机会，大家开个交流会进行讨论 （对于每个个体）互通有无，集思广益，团队每人都有所提升 （对于互相之间协作）更多地了解到彼此 阅读代码、写代码的风格习惯，增进理解 （对于工作）对现阶段遇到的痛点，找出更优解，或制定调研计划 每次讨论，规范条款上的收获，不在于多少，至少会收获了一些代码细节上的技巧或认知，最重要的是 大大增进了互相的了解，协作起来将越来越紧密顺畅。 讨论成果 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:0:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"组件代码结构 关键点: 打开文件后，更方便的看到核心代码（那就尽量靠前咯） 也就是 render/return组件 之前的代码量尽可能少；那么，就需要通过函数提炼、划分职责等方式转移到别处。 组件代码 书写顺序 示例如下 // AAView.js import { xxCalculate, xxUploadEvent } from 'app/components/XxModule' import AView from './components/AView' import BView from './components/BView' //$$ 用于组件函数内的变量 紧邻写在组件函数上方 const variableUsedInXXComp = ... //组件函数 const AAView = props =\u003e { //$$ props解构, 放第一行 ///reason：即使AAView上面不写@param注释，通过这里的解构也能看出props的参数 const { paramA, paramB } = props //$$ 副作用函数(即use开头的函数)，写在顶层作用域， const [aEverClicked, setAEverClicked] = useState(false) const [bClickedTime, setBClickedTime] = useState(0) ... //$$ 归类逻辑代码到hooks，e.g. 数据处理（获取数据、更新数据）聚合到一个hooks， 滑动相关监听处理 聚合到另一个hooks const {loading, data, error, addData, updateData} = useLoadData({id: paramA}) ... //$$ 业务逻辑处理。 注意：如果这部分代码较多，一般是可以转移几个api，挪到 某单一职责的hooks里去 const onPressAView = () =\u003e { //如果复杂逻辑(多行 e.g. 15行)，抽取纯函数， 与XXComp并列 放其后面 addData( calculateAndCreateItemData(inputX, bClickedTime) ) setAEverClicked(true) xxUploadEvent() } const onPressBView = () =\u003e { //简单逻辑(e.g. \u003c10行)，直接写在这里 updateData({ count: bClickedTime, key: variableUsedInXXComp }) ... setBClickedTime(bClickedTime+1) } ... ... //$$ render return ( \u003cView style={styles.container}\u003e \u003cAView onPress={onPressAView}\u003e {aEverClicked ? \u003cView\u003e ... \u003c/View\u003e : null } ... \u003c/AView\u003e \u003cBView param={inputY} onPress={onPressBView}\u003e ... \u003c/BView\u003e ... { data?.map(item =\u003e (\u003cView style={styles.content}}\u003e \u003cText style={styles.title}\u003e{styles.title}\u003c/Text\u003e \u003cImage style={styles.cover} source={data[0].cover} /\u003e \u003c/View\u003e)) } \u003c/View\u003e ) } //$$ hooks 数据获取相关逻辑：请求、loading状态、错误、数据处理(response data -\u003e UI data) const useLoadData = ({id}) =\u003e { const [data, setData] = useState(null) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) useEffect(()=\u003e{ request({id}).then(res=\u003e{ setData(res.data) }); }, []) //请求 return { data, loading, error ... } } //$$ 仅用于组件内部的函数 紧邻写在组件函数下方 const calculateAndCreateItemData = (a, b) =\u003e { let result = {} //复杂逻辑 ... ... result.count = xxCalculate(a, ...) return result } // 方法提炼到这里 reason： // 1.提炼纯函数，略利于性能 // 2.移到这里，减少对核心代码的干扰 //$$ 仅用于样式的变量 紧邻写在styles声明的上方 const listWidth = px2dp(100) const styles = StyleSheet.create({ container: { //约束自身 flex: 1, backgroundColor: '#eee', marginTop: px2dp(20), //约束子视图的 paddingHorizontal: px2dp(15), flexDirection: \"row\", alignItems: \"center\", justifyContent: \"space-between\", }, list: { marginHorizontal: 10, width: listWidth, ... }, ... }) ","date":"2023-11-01","objectID":"/zyestin/code-standards/:1:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"较复杂模块拆分后的目录结构 目录 体现着模块划分思维 取项目里的一个典型示例 \u003e tree ./app/screens/graphic/tabs/userHome/ ./app/screens/graphic/tabs/userHome/ ├── components │ ├── Header │ │ ├── BackgroundImage.js │ │ ├── MoreButton.js │ │ ├── OpaqueNavBar.js │ │ ├── index.js │ │ └── useHeader.js │ ├── LoadingView.js │ ├── Tabbar.js │ ├── TabsStickScrollView.js │ └── list │ ├── HistoryWorkList.js │ ├── LikedWorkList.js │ ├── MineWorkList.js │ ├── UserWorkList.js │ └── item │ ├── UnpublishedEntryItem.js │ ├── UnpublishedType.js │ └── index.js ├── index.js ├── otherScreens │ ├── DraftScreen.js │ └── RejectScreen.js └── utils └── DraftDataManager.js 合理拆分模块，避免单文件代码行数过多，统一命名风格，将大大减少理解阻碍 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:2:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"通知命名 以后会出这样一个 通知名 集中存放的文件 //NotificationCenter.js export { listen, emit, } // 参考 iOS通知命名，UIKeyboardWillChangeFrameNotification， // 命名表达出 who did (/will do) what，（即将）谁做了什么 //画本（某作品）点赞状态改变 export const kGraphicLikeStatusChangeNotification = 'kGraphicLikeStatusChangeNotification'; /* 使用示例 import { emit, kGraphicLikeStatusChangeNotification } from 'app/.../NotificationCenter'; emit(kGraphicLikeStatusChangeNotification, { graphicId: 123, likeStatus: 1 }); import { listen, kGraphicLikeStatusChangeNotification } from 'app/.../NotificationCenter'; const listener = listen(kGraphicLikeStatusChangeNotification, (data) =\u003e { ... } listener.remove(); */ ","date":"2023-11-01","objectID":"/zyestin/code-standards/:3:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"单个函数的总行数 限制多大合适？ 《阿里巴巴 Java 开发手册 v1.4.0（详尽版）》 ：80 行 https://edu.aliyun.com/article/103 若结合到咱公司自己项目， \u003c\u003e 与 \u003c/\u003e、{ 与 } 等标签的开始、结束（作用域）内尽量不超过 80 行 示例中的组件函数AAView比较特殊，其本身可能超 100 行，甚至更多 也没问题。因为其内部包含多个子函数、子组件；AAView内部的子函数、子组件\u003cView\u003e\u003c/View\u003e等可以参考 80 行限制 《代码不朽》：15 行 https://www.zhihu.com/question/280041384/answer/468623926 为什么编程应遵循 “30” 规则 https://www.infoq.cn/article/uu6zgvebe9w1ab1yqilb 《代码大全》Steve McConnell 指出，理论上，一个方法或函数的最佳最大限制是在一个屏幕上可以容纳的行数。 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:4:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"单个文件代码行数 限制多大合适？ 核心点 维护成本：长而冗长的代码通常更难以理解、调试和维护。通过设置代码行数限制，可以鼓励开发者编写更简洁、模块化的代码，从而减少维护成本。 ChatGPT 的看法 掘金文章 看法 https://juejin.cn/s/一个文件代码行数不超过多少 300~500 https://juejin.cn/s/一个文件代码行数不超过多少行%20华为 200 其它看法 【生理上】人的记忆只有三屏，80 行预计在两屏至两屏半之间。 【原则上】主干逻辑清晰，简洁易读 【要纯】初期代码多烂其实问题都不大的, 只要你函数全都是纯的, 以后化简还是拆起来都不是问题. 按照《重构》去做了，就不会出现单文件代码行数多的问题了 《好代码，坏代码》 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:5:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"单行代码 字符串宽度/数量限制 上面提到的文件代码行数、函数代码行数在各大公司标准中 基本没有指明，但代码列数限制到是不少标准里 提到。 谷歌的Google JavaScript Style Guide 80 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:6:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"其它 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:7:0","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"市面上 大而全的 JavaScript 规范 Airbnb JavaScript Style Guide Google JavaScript Style Guide Standard JavaScript ","date":"2023-11-01","objectID":"/zyestin/code-standards/:7:1","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"代码规范的常用工具 eslint prettier ","date":"2023-11-01","objectID":"/zyestin/code-standards/:7:2","tags":["react-native"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":null,"content":"《React Hooks 核心原理与实战》学习 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:0:0","tags":["react-native"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":null,"content":"hooks Q: 为什么 Facebook 要发明React Hooks？React Hooks 解决了什么问题？ A: 简化了逻辑重用 hooks之前，复用逻辑要用到高阶组件或者render props 组件每次渲染，内部的函数会重新创建，导致 接收传递函数的子组件 也重新渲染 useCallback 对组件间传递的 (回调)函数 尽量都包裹 useMemo 缓存计算 useCallback，useMemo 只是为了避免 React 组件的重复渲染而导致的性能损失。 而对于原生的节点，比如 div, input 这些，它们已经是原子节点了，不再有子节点， 所以不存在重复刷新带来的性能损失。 useEffect执行时机是 DOM渲染后 useEffect中用到的变量，需要作为依赖参数 拆分复杂组件：不同逻辑拆到不同的Hooks里 Context 适用场景：仅 主题色、语言切换 redux 数据共享 避免不必要的请求 state 使用注意 state 避免定义多余的，找唯一数据源头 去发起改变 上次同事libin提到过这个场景：A传参value1给B，B又传value1给C，C里面能触发改变value1 方案1：C中的操作触发value1变更时，C不维护value1 state，由C回调给B再回调给A，由A改变value1，从而重新渲染B、C 方案2：C中的操作触发value1变更时，C改变C内部的value1，同时回调给B、A去更新(C外部)对应的value1 根据这篇来看，更倾向于方案1 。避免在子组件定义多余的state(value1)，找唯一数据源头A 去发起改变 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:1:0","tags":["react-native"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":null,"content":"设计模式 所谓「设计模式」，就是针对特定场景，提供一种公认的最佳实践 保证状态的唯一数据源 语义化的拆分复杂组件 Hooks 的一个重要规则，即：Hooks 必须在顶层作用域调用 而不能放在条件判断、循环等语句中，同时也不能在可能的 return 语句之后执行。换句话说，Hooks 必须按顺序被执行到。 容器模式，把条件判断的结果放到两个组件之中。可用Hooks替代 function CounterRenderProps({ children }) { ... return children({ count, increment, decrement }); } render props 模式，重用 UI 逻辑 function ListWithMore({ renderItem, data = [], max }) ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:2:0","tags":["react-native"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":null,"content":"拆包/分包：提高首屏页面的打开速度 function ProfilePage() { // 定义一个 state 用于存放需要加载的组件 const [RealPage, setRealPage] = useState(null); // 根据路径动态加载真正的组件实现 import('./RealProfilePage').then((comp) =\u003e { setRealPage(Comp); }); // 如果组件未加载则显示 Loading 状态 if (!RealPage) return 'Loading....'; // 组件加载成功后则将其渲染到界面 return \u003cRealPage /\u003e } import() 这个语句完全是由 Webpack 进行处理的 Webpack 会将以“./RealProfilePage”模块为起点的所有依赖模块，单独打成一个包。 并且，Webpack 还会生成代码，用于按需加载这个模块。 react-lodable，实现组件的异步加载 通过高阶组件来实现的，这个高阶组件实现了模块加载、loading 状态以及错误处理的功能。 import Loadable from \"react-loadable\"; // 创建一个显示加载状态的组件 function Loading({ error }) { return error ? 'Failed' : 'Loading'; } // 创建加载器组件 const HelloLazyLoad = Loadable({ loader: () =\u003e import(\"./RealHelloLazyLoad\"), loading: Loading, }); service worker 缓存前端资源：提高第二次以及后续打开 App 的速度 可以把 Service Worker 看作一种前端的资源请求代理。Service Worker 会拦截所有浏览器发送出来的请求，你可以通过代码去控制Rest API 这些请求发送到服务器；而 JS、CSS 等静态资源，则通过 Cache Storage 存储 在浏览器端。 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:3:0","tags":["react-native"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":null,"content":"Webpack 为主流的前端应用打包工具，它的核心思路是将源代码以及图片、样式文件等资源文件都视为模块，然后通过提供对不同类型资源的处理器，将它们进行统一处理，形成最终可在浏览器运行的代码。 输入输出配置：定义你的应用程序的入口，以及打包结果输出的文件夹位置。 配置对于每一类资源文件的处理器：比如说，对 JavaScript 是用 babel-loader 去编 译；对 less 文件则是用 less-loader 去编译；图片则用 file-loader 去处理。你在项目 中能使用哪些技术或者资源，完全取决于配置了哪些 loader。 插件配置：除了核心的源代码编译和打包流程，Webpack 还支持插件扩展功能，可以 通过插件生成额外的打包结果，或者进行一些其它的处理。比如打包过程生成 index.html，源代码分析报表，提取 CSS 到独立文件，代码压缩，等等。 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: { // 定义ath.resolve(__dirname, './src/app.js'), }, output: { // 打包输出的文件名，这里将生成 main.bundle.js filename: '[name].bundle.js', // 定义打包结果的输出位置 path: path.resolve(__dirname, 'build'), }, module: { // 定义处理源文件的规则，rules 下会按顺序使用匹配的规则 rules: [ { // 遇到 .js 结尾的文件则使用这个规则 test: /\\.js$/, // 忽略 node_modules 目录下的 js 文件 exclude: /node_modules/, use: { // 使用 babel-loader 处理 js loader: 'babel-loader', // babel-loader 的一些选项 options: { presets: ['@babel/preset-env'], }, }, }, ], }, plugins: [ // 使用 HtmlWebpackPlugin 生成一个 index.html，其中自动引入 js // 并配置了页面的 title new HtmlWebpackPlugin({ title: 'Webpack Output', }), ], }; 针对这段配置代码，我们一般会把它存储为 webpack.config.js 这样一个文件，这样在我 们的项目下运行 webpack 命令，就会使用这个文件作为配置。 代码中其实已经很直观了，我们不仅定义了输入输出，还配置了 babel-loader，用于编译 JavaScript 文件到兼容主流浏览器的代码。同时，还为 babel-loader 设置了参数 Less 允许我们通过更强大的机制去写 Css，比如可以定义变量，允许嵌套的规则定义，等等。 要让一个 Less 文件最终打包到目标文件中，并被浏览器运行，那么首先需要把 Less 代码转换成 Css，再通过 style 标记插入到浏览器中。 这个过程涉及到三个 loader，如下： less-loader：用于将 Less 代码转换成 Css。 css-loader：用于处理 Css 中的 import、url 等语句，以便能分析出图片等静态资源打 包到最终结果。 style-loader：会自动生成代码，并将打包后的 Css 插入到页面 style 标签。这个 loader 会将 Css 打包到 js 文件中，在应用运行时，自动生成的代码再把这些 css 应用 到页面上。 module.exports = { // ... module: { rules: [ // ... { // 检测 less 文件 test: /\\.less$/, // 使用了三个 loader，注意执行顺序是数组的倒序 // 也就是先执行 less-loader use: ['style-loader', 'css-loader', 'less-loader'], }, ], }, //... }; 如果项目要支持 sass 作为 Css 预处理器，那么顺序就是 sass-loader -\u003e css- loader -\u003e style-loader。可以看到，我们只要替换 less-loader 为 sass-loader，后两个 loader 是完全一样的。 常见QA 为什么 CSS 代码会进入到 JavaScript 文件中呢？最终它是怎么应用到页面的呢？ 其实背后的过程主要是，生成的 CSS 代码会以字符串的形式作为一个模块打包 到最终结果，然后在运行时由 style-loader 提供的一个函数 injectStylesIntoStyleTag ， 来将这个模块加入到页面的 style 标签中，从而最终生效。 如果我们想让生成的 CSS 文件和 JavaScript 文件分开，应该如何做呢？ 从 rules 中去掉 style-loader 这个配置，以避免 CSS 进入到 JavaScript 文件中。 实现提取 CSS 模块到单独 CSS 文件的 plugin 是 mini-css-extract-plugin plugin 和 loader 的区别 loader主要用于处理不同类型的资源，将它们转换成模块； plugin 通常用于生成一些除了JavaScript bundle 之外的一些打包结果，比如例子中的 index.html 和 css 文件 React Native中用到 babel的例子 Webpack 动态加载模块 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:4:0","tags":["react-native"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":null,"content":"感谢 感谢公司购买了这个课程《React Hooks 核心原理与实战》 感谢《React Hooks 核心原理与实战》作者分享这些经验 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:5:0","tags":["react-native"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":null,"content":"Q: 代码调用一个弹窗的极简方式是怎样的？ A: 这样子👉🏻 XxModuleAlert.show({..}) 为了这个极简用法的目标，我曾经 使用rn-global-modal封装过TextInputAlert，但依然有些问题或难用点，比如遮挡了Toast、更改mask颜色要改源码、布局上有些非正常的地方 因为不希望弹窗遮挡Toast，于是研究了react-native-root-toast，用的react-native-root-siblings，从而找到了封装理想弹窗的更快的方式 于是，基于react-native-root-siblings 5.0.1，造了一个 AlertManager Why need AlertManager 相信大家使用过RN官方Modal的，都知道，iOS弹窗无法弹两个，使用起来不满足高内聚低耦合，难受。。。 ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:0","tags":["react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":null,"content":"RN官方Modal 缺点：耦合过多！须visible属性，多1个import useState，多1行代码setVisble声明，弹窗组件须嵌入容器组件 ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:1","tags":["react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":null,"content":"rn-global-modal 优点：函数式调起弹窗，任意处可调用 缺点：iOS 不支持同时多层弹窗；toast的层级低于它 导致看不到/看不清 What AlertManager provide 封装者：封装出高度解耦的弹窗。 使用方：使用极简！ ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:2","tags":["react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":null,"content":"优势 vs Modal：去掉visible vs rn-global-modal: 支持多层弹窗, TextInput弹窗对键盘支持更好？？ How to use AlertManager 使用方： XxModuleAlert.show({...}); XxModuleAlert.hide(); 封装方: class XxModuleAlert { static show() { AlertManager.show(\u003cXxModuleView /\u003e, { key: XxModuleView.name, }); } static hide() { AlertManager.hide(XxModuleView.name); } } export XxModuleAlert const XxModuleView = () =\u003e { ... return (...) } 源码 import React from \"react\"; import { Dimensions, TouchableOpacity, View } from \"react-native\"; import RootSiblingsManager from \"react-native-root-siblings\"; const { width, height } = Dimensions.get(\"window\"); /** * 弹窗管理类 * - 支持同时弹出多个弹窗 （Modal、rn-global-modal 不支持） * - 不会遮挡Toast（Modal、rn-global-modal 会遮挡Toast） */ class AlertManger { static _alertNodes = {}; // { key1: { rootNode: \u003cA/\u003e, onClose: () =\u003e {} }, key2: { rootNode: \u003cB/\u003e, onClose: () =\u003e {} } /** * 展示弹窗 * @param {*} modalView 弹窗内所要展示的内容组件 * @param {*} options.key **必传** 弹窗唯一标识 * @param {*} options.maskStyle 蒙层样式 默认值：{ backgroundColor: 'rgba(0, 0, 0, 0.5)' } * @param {*} options.maskTouchClosable 弹窗蒙层是否可点击关闭 * @param {*} options.closedCallback 弹窗关闭的回调 * @param {*} options.animationType [todo] 弹窗动画类型: none | fade | slide-up */ static show(modalView, options) { const { key, maskTouchClosable, closedCallback, maskStyle } = options; let rootNode; const onClose = () =\u003e { rootNode?.destroy(); rootNode = null; closedCallback?.(); }; rootNode = new RootSiblingsManager( ( \u003cView style={[ { position: \"absolute\", width: width, height: height, justifyContent: \"center\", alignItems: \"center\", backgroundColor: \"rgba(0,0,0,0.5)\", }, maskStyle, ]} \u003e \u003cTouchableOpacity style={{ position: \"absolute\", width: width, height: height, }} activeOpacity={1} onPress={(e) =\u003e { maskTouchClosable \u0026\u0026 this.hide(key); }} /\u003e {modalView} \u003c/View\u003e ) ); this._alertNodes[key] = { rootNode, onClose }; console.log(\"this._alertNodes:::\", this._alertNodes); } static hide(key) { console.log( \"this._alertNodes?.[key]?.onClose::\", this._alertNodes?.[key]?.onClose ); this._alertNodes?.[key]?.onClose?.(); delete this._alertNodes[key]; } } export default AlertManger; /* ----------------------- Usage ---------------------- */ /* * 弹窗开发者 这样封装自己的弹窗 ``` import AlertManager from \"app/components/dialog/AlertManager.js\"; class BbModuleAlert { static show() { AlertManager.show(\u003cBModuleView /\u003e, { key: BModuleView.name, maskTouchClosable: true, closedCallback: () =\u003e { console.log(\"BModuleView closedCallback\"); }, }); } static hide() { AlertManager.hide(BModuleView.name); } } export default BbModuleAlert; const BModuleView = () =\u003e { return ( ... ) } ``` */ /* * 弹窗调用者 这样调用弹窗 ``` import BbModuleAlert from \"./BbModuleAlert\"; BbModuleAlert.show(); BbModuleAlert.hide(); ``` */ ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:3","tags":["react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":null,"content":"todo 如何提供 页面级别的弹窗 showInComp(comp) 需求： 某个弹窗，是当前A页面的子视图，若点击该弹窗种的按钮，跳转到下一个B页面时，该弹窗继续展示在A页面，B页面在最上层展示(是盖住该弹窗的) 像 取消\u0026确认 弹窗，可以基于这个重做一遍了 ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:1:0","tags":["react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":null,"content":"效果展示/UI 切换输入法，避开键盘 输入/粘帖时，文字换行，输入框高度准确变化 ","date":"2023-11-01","objectID":"/zyestin/textinput-alert/:1:0","tags":["react-native"],"title":"封装 低耦合、易用的文本输入框弹窗","uri":"/zyestin/textinput-alert/"},{"categories":null,"content":"使用/Usage 封装后，如下这样使用，解耦的干干净净 import TextInputAlert from \"./TextInputAlert\"; TextInputAlert.show({ text: \"hello\", // maxLength: 20, onChange: function didInputChange(text_) { console.log(\"didInputChange::\u003e\u003e\", text_); }, onCompleted: () =\u003e { console.log(\"onCompleted::\u003e\u003e\", content); }, }); TextInputAlert.hide(); 像原生一样调api方式展示弹窗，不需要Modal那样耦合过多（视图嵌入、visible字段控制…） ","date":"2023-11-01","objectID":"/zyestin/textinput-alert/:2:0","tags":["react-native"],"title":"封装 低耦合、易用的文本输入框弹窗","uri":"/zyestin/textinput-alert/"},{"categories":null,"content":"源码/Code TextInputAlert ","date":"2023-11-01","objectID":"/zyestin/textinput-alert/:3:0","tags":["react-native"],"title":"封装 低耦合、易用的文本输入框弹窗","uri":"/zyestin/textinput-alert/"},{"categories":null,"content":"目录 瀑布流列表base组件 图片base组件 状态栏导航栏组件 页面左上角的返回按钮组件 瀑布流列表base组件 源码：BaseList.js 优点：将下拉刷新、上拉加载更多相关的 pageNo逻辑，封装到BaseList中，使用方仅需关注 数据请求的api，让使用方代码量降到最少。 ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:0","tags":["react-native"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":null,"content":"使用示例 平替 FlatList import BaseList from \"app/components/list/base\"; import { getFanList } from \"./service\"; const pageSize = 10; const FanList = (props) =\u003e { const { userId } = props; const _requestFunc = (page, pageSize) =\u003e { return getFanList({ userId: userId, pageNo: page, pageSize }); }; const _renderItem = ({ item, index }) =\u003e { return \u003cItem {...item} /\u003e; }; return ( // \u003cView style={{ flex: 1 }}\u003e \u003cBaseList requestFunc={(page) =\u003e _requestFunc(page, pageSize)} contentContainerStyle={{ paddingVertical: px2dp(5), paddingLeft: px2dp(5), }} renderItem={_renderItem} // numColumns={1} uniqueKey={\"userId\"} /\u003e // \u003c/View\u003e ); }; 可能会有双列分布不均问题，即某一列大量空白现象 最完美（渲染均匀、性能最佳）用法 import { StyleSheet, Text, View } from \"react-native\"; import React, { forwardRef, useCallback, useEffect } from \"react\"; import ImageTextFeed, { sizeForItem as imageTextFeedSizeForItem, } from \"./Feed/ImageTextFeed\"; import TextFeed, { sizeForItem as textFeedSizeForItem } from \"./Feed/TextFeed\"; import { px2dp } from \"app/utils/ScreenUtils\"; import BaseList from \"app/components/list/base\"; import SA from \"app/utils/SaUtil\"; const FeedList = forwardRef((props, ref) =\u003e { const { requestFunc, ListHeaderComponent, disableAutoLoadNew, ListEmptyComponent, } = props; useEffect(() =\u003e { console.log(\"useEffect:FeedList\"); }, []); const _renderItem = ({ item, index }) =\u003e { if (item.previewUri) { return \u003cImageTextFeed item={item} /\u003e; } else { return \u003cTextFeed item={item} /\u003e; } }; return ( \u003cBaseList ref={ref} requestFunc={(page) =\u003e requestFunc(page)} contentContainerStyle={{ paddingVertical: px2dp(0), paddingLeft: px2dp(12), }} renderItem={_renderItem} numColumns={2} uniqueKey={\"id\"} getItemType={(item) =\u003e { return item.previewUri ? \"ImageText\" : \"Text\"; }} headRefreshEnable={true} ListHeaderComponent={ListHeaderComponent} disableAutoLoadNew={disableAutoLoadNew} ListEmptyComponent={ListEmptyComponent} sizeForItem={(item, index) =\u003e { return item.previewUri ? imageTextFeedSizeForItem(item) : textFeedSizeForItem(item); }} /\u003e ); }); export default FeedList; 图片base组件 源码：BaseImage.js 优点： 使用了高性能图片库FastImage，封装为 可配置图片加载失败后展示的占位error图 ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:1","tags":["react-native"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":null,"content":"使用示例 // aliyun oss image format // error image url: https://cdn.xxx.com/pic/illustrationstory/default/default_cover_720-1080.png?x-oss-process=image/resize,w_150/quality,q_85/format,webp // normal image url: https://cdn.xxx.com/pic/illustrationstory/custom/scene/202310/2721/1698415166233-0yZkuCBu9I_960-960.png?x-oss-process=image/resize,w_150/quality,q_85/format,webp import HBImage from \"app/components/image/HBImage\"; import { getSize, parseSize } from \"app/utils/image/measurer\"; const FeedItem = (props) =\u003e { const coverUrl = useMemo( () =\u003e getImageUrl(item.coverUrl, imageWidth), //oss resize 拼接url [item.coverUrl] ); const imageHeightFromUrl = useMemo(() =\u003e { return getHeightFromSize(parseSize(coverUrl)); // parseSize 从url(..._720-1080.png...)中解析出宽高 【正常100%都能取出】 }, [coverUrl]); const [imageHeight, setImageHeight] = useState(imageHeightFromUrl); useEffect(() =\u003e { if (!(imageHeightFromUrl \u003e 0)) { //若从url中未能解析出宽高，就通过RN官方Image.getSize方式获取宽高 【正常100%不可能走这里头】 let h = imageSize; getSize(coverUrl) .then((size) =\u003e { if (size) { h = getHeightFromSize(size); } setImageHeight(h); kImageHeightCache[coverUrl] = h; }) .catch((err) =\u003e { setImageHeight(h); }); } else { kImageHeightCache[coverUrl] = imageHeightFromUrl; } }, [coverUrl]) return \u003c\u003e {imageHeightFromUrl || imageHeight ? ( \u003cHBImage style={[ localStyles.image, { height: imageHeightFromUrl \u003e 0 ? imageHeightFromUrl : imageHeight, }, ]} source={{ uri: coverUrl }} resizeMode={\"contain\"} errorSource={require(\"app/components/image/default_cover_720-1080.png\")} /\u003e ) : null} \u003c/\u003e } const getHeightFromSize = (size) =\u003e { if (!(size?.width \u003e 0) || !(size?.height \u003e 0)) return 0; return Math.min((imageSize * size.height) / size.width, maxImageHeight); }; 状态栏导航栏组件 源码：BaseNavBar.js 优点： 带 返回按钮，点击返回上一页 带 title 支持自定义导航栏内子视图 使用时无需考虑状态栏适配了（内部处理了） ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:2","tags":["react-native"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":null,"content":"使用示例 最常规用法 [ 返回键 + title ] 使用场景：几乎所有页面 import BaseNavBar from \"app/components/navBar/base\"; \u003cBaseNavBar title={\"书架筛选\"} /\u003e 自定义导航栏内容用法 使用场景：导航栏需要特别自定义时 import BaseNavBar from \"app/components/navBar/base\"; \u003cBaseNavBar\u003e {/* 搜索栏 */} \u003cView style={styles.inputContainer}\u003e \u003cTextInput style={styles.textInput} placeholder={placeholder || \"输入搜索关键字\"} placeholderTextColor={\"#999999\"} onChangeText={onChangeText} value={keyword} onSubmitEditing={_onClickSubmit} keyboardType=\"web-search\" returnKeyType=\"search\" autoFocus={true} /\u003e \u003cTouchableOpacity style={styles.closeButton} onPress={clearInput}\u003e \u003cImage style={styles.closeButtonImage} source={require(\"./images/close-gray.png\")} /\u003e \u003c/TouchableOpacity\u003e \u003c/View\u003e \u003cTouchableOpacity style={styles.searchButton} onPress={_onClickSubmit}\u003e \u003cText style={{ fontSize: px2dp(16), color: \"#666666\" }}\u003e搜索\u003c/Text\u003e \u003c/TouchableOpacity\u003e \u003c/BaseNavBar\u003e 页面左上角的返回按钮组件 源码：LeftUpBackButton.js 优点： 避开了状态栏 热区足够大 使用起来极简 使用场景：不需要导航栏 但需要返回按钮的页面，e.g. 一些全屏弹窗（图片查看器…） ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:3","tags":["react-native"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":null,"content":"使用示例 import LeftUpBackButton from \"app/components/LeftUpBackButton\"; \u003cLeftUpBackButton //iconType=\"white\" //onPress={() =\u003e { //dismiss alert //}} /\u003e ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:4","tags":["react-native"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":null,"content":"需求 当输入 以#开头的字符串，则判定为标签 并展示为蓝色 效果图 ","date":"2023-11-01","objectID":"/zyestin/douyin-label-input/:1:0","tags":["react-native"],"title":"模仿抖音、小红书 输入 #标签 高亮","uri":"/zyestin/douyin-label-input/"},{"categories":null,"content":"调研 iOS的TextField可以设定attributedString富文本，但RN的TextInput是不具备的。 方案： TextInput上浮一个style大小一致的Text，TextInput文字颜色设为透明，Text内嵌套 style为蓝色的Text 用来展示#任意(至少1个)字符 ","date":"2023-11-01","objectID":"/zyestin/douyin-label-input/:2:0","tags":["react-native"],"title":"模仿抖音、小红书 输入 #标签 高亮","uri":"/zyestin/douyin-label-input/"},{"categories":null,"content":"代码 import React, { useState } from \"react\"; import { View, TextInput, Text, StyleSheet } from \"react-native\"; const App = () =\u003e { const [text, setText] = useState(\"\"); const handleTextChange = (inputText) =\u003e { // 检测输入字符串中是否包含 \"#\" if (inputText.includes(\"#\")) { // 将包含 \"#任意(至少1个)字符\" 的部分替换为带有蓝色样式的文本组件 const parts = inputText.split(/(?=#|\\s)/g); console.log(\"parts: \", parts); const formattedText = parts.map((part, index) =\u003e { return part.includes(\"#\") \u0026\u0026 part.length \u003e= 1 ? ( \u003cText onPress={() =\u003e { console.log(\"click part:\", part); }} key={index} style={{ color: \"blue\" }} \u003e {part} \u003c/Text\u003e ) : ( part ); }); // 设置更新后的文本 setText(formattedText); } else { // 输入字符串不包含 \"#文字\"，直接设置文本 setText(inputText); } }; return ( \u003cView style={{ flex: 1, backgroundColor: \"pink\", marginTop: 100 }}\u003e \u003cTextInput style={[ styles.text, { borderWidth: 1, borderColor: \"gray\", width: \"100%\", padding: 0, color: \"white\", }, ]} onChangeText={handleTextChange} multiline={true} \u003e \u003cText\u003e{text}\u003c/Text\u003e \u003c/TextInput\u003e \u003cText style={{ color: \"yellow\" }}\u003e{text}\u003c/Text\u003e \u003c/View\u003e ); }; const styles = StyleSheet.create({ container: { backgroundColor: \"#fff\", borderWidth: 1, borderColor: \"gray\", padding: 10, marginTop: 20, }, text: { color: \"white\", fontSize: 16, lineHeight: 20, }, }); export default App; 代码核心逻辑： 输入文字变化后，将文字按照 #文本，分割为数组，结果如下日志所示。 然后对每个元素 判断是否含#，含有 则设定blue样式 日志： LOG parts: [\"好的\", \"#记得记\", \" 记得记得\", \"#记得记得\", \" \", \"#记得记得\", \" \"] ","date":"2023-11-01","objectID":"/zyestin/douyin-label-input/:3:0","tags":["react-native"],"title":"模仿抖音、小红书 输入 #标签 高亮","uri":"/zyestin/douyin-label-input/"},{"categories":null,"content":"需求 效果展示 ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-horizontal/:1:0","tags":["react-native"],"title":"横向 瀑布流列表","uri":"/zyestin/waterfall-list-horizontal/"},{"categories":null,"content":"源码 import { StyleSheet, Text, TouchableOpacity, View } from \"react-native\"; import React, { useEffect, useRef, useState } from \"react\"; import HBImage from \"../../../../components/image/HBImage\"; import { px2dp } from \"../../../../utils/ScreenUtils\"; import { MasonryFlashList } from \"@shopify/flash-list\"; import { bookOpenChoices } from \"app/service/MarkService\"; import * as indexUtil from \"app/utils/index\"; const itemWidth = px2dp(12 + 86.5 + 251.5); const itemHeight = px2dp(139); const itemSpace = px2dp(17); const UserChooseBook = (props) =\u003e { const { selectedSex, marks } = props; const [dataList, setDataList] = useState([]); const listViewRef = useRef(null); const { onScrollBeginDrag, onScroll } = useListViewAutoScrollAnimate({ listViewRef: listViewRef, framesPerSecond: 40, // 1000/40 = 25帧/秒 offsetPerFrame: 1, totalScrollDistance: (itemWidth * Math.max(0, Math.max(0, dataList?.length || 0) - 1)) / 2, disableAnimate: false, }); useEffect(() =\u003e { bookOpenChoices({ gender: selectedSex || \"girl\", ...(marks ? { marks: marks } : {}), }).then((res) =\u003e { setDataList(res.books); }); }, []); const renderItem = (props) =\u003e { console.log(\"renderItem props:\", props); return ( \u003cBookItem key={props.item?.bookId} {...props} onPress={() =\u003e { goNext(props.item.bookId); }} /\u003e ); }; const goNext = (bookId) =\u003e {}; return ( \u003cView style={styles.container}\u003e \u003cText style={styles.title}\u003e进站必读\u003c/Text\u003e \u003cView style={styles.scrollContainer}\u003e \u003cMasonryFlashList ref={listViewRef} estimatedItemSize={/* itemStyles.container.height */ 100} data={dataList} keyExtractor={(item, index) =\u003e item?.[\"bookId\"]} initialNumToRender={5} numColumns={2} renderItem={renderItem} showsVerticalScrollIndicator={false} onScrollBeginDrag={onScrollBeginDrag} onScroll={onScroll} /\u003e \u003c/View\u003e \u003cTouchableOpacity style={styles.button} onPress={() =\u003e goNext()}\u003e \u003cText style={styles.buttonTitle}\u003e{\"跳过\"}\u003c/Text\u003e \u003c/TouchableOpacity\u003e \u003c/View\u003e ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: \"center\", paddingLeft: itemSpace, }, title: { marginTop: px2dp(90), color: \"#101417\", fontWeight: \"bold\", fontSize: px2dp(17), lineHeight: px2dp(24), }, scrollContainer: { marginTop: px2dp(72), width: itemHeight * 2 + itemSpace * 2, //px2dp(139 * 2 + 17), height: px2dp(375), transform: [{ rotate: \"270deg\" }], }, }); export default UserChooseBook; // ----- ----- ----- ----- hooks ----- ----- ----- ----- const useListViewAutoScrollAnimate = ({ listViewRef, framesPerSecond, offsetPerFrame, totalScrollDistance, }) =\u003e { const scrollInterval = Math.floor(1000 / framesPerSecond); // 每次滚动之间的间隔，每秒动画的帧数 const scrollDistance = offsetPerFrame; // 控制每scrollInterval 滚动的距离 const [disabled, setDisabled] = useState(false); const scrollIntervalId = useRef(null); const currentScrollDistance = useRef(0); useEffect(() =\u003e { const stopAutoScroll = () =\u003e { clearInterval(scrollIntervalId.current); }; if (totalScrollDistance \u003e 10 \u0026\u0026 !disabled) { setTimeout(() =\u003e { startAutoScroll(); }, 100); } return () =\u003e { stopAutoScroll(); }; }, [totalScrollDistance, disabled]); const scroll = () =\u003e { const nextDistance = Math.min( totalScrollDistance, currentScrollDistance.current + scrollDistance ); listViewRef.current.scrollToOffset({ offset: nextDistance, animated: false, }); currentScrollDistance.current = nextDistance; if (currentScrollDistance.current \u003e= totalScrollDistance) { currentScrollDistance.current = 0; } }; const startAutoScroll = () =\u003e { scrollIntervalId.current = setInterval(scroll, scrollInterval); }; const onScrollBeginDrag = () =\u003e { setDisabled(true); }; const onScroll = (e) =\u003e { currentScrollDistance.current = e.nativeEvent.contentOffset.y; }; return { onScrollBeginDrag, onScroll, }; }; // ----- ----- ----- ----- component ----- ----- ----- ----- const BookItem = (props) =\u003e { const { item, index, onPress } = props; const { coverUrl, bookName: title } = item; const _coverUrl = indexUtil.getImageUrl( indexUtil.DOMAIN_PICAPP, coverUrl, indexUtil.IMG_BOOK_COVER_LIST ); return ( \u003cTouchableOpacity style={[item","date":"2023-11-01","objectID":"/zyestin/waterfall-list-horizontal/:2:0","tags":["react-native"],"title":"横向 瀑布流列表","uri":"/zyestin/waterfall-list-horizontal/"},{"categories":null,"content":"代码核心逻辑 MasonryFlashList 自动慢速滚动动画，借鉴 这一篇瀑布流列表 自动滚动动画，在这里运用时 封装在useListViewAutoScrollAnimate之中 把列表变成水平滑动的方式是，将列表旋转90度，将Item内容反转90度。 为何不使用类似ScrollView的horizontal属性，直接设成水平滚动不就好了？ 我也想，只不过MasonryFlashList官方明确表示，不支持呀~ 以下是列表垂直变水平的关键步骤 const itemWidth = px2dp(12 + 86.5 + 251.5); //大值 const itemHeight = px2dp(139); //小值 const itemSpace = px2dp(17); Item内容，按蓝湖图设置真实宽高 transformContainer: { width: itemWidth, //大 height: itemHeight //小 } Item 要被颠倒90度，展示在一个垂直列表里，所以transform这样设置 transform: [ { rotate: \"90deg\" }, { translateX: (itemWidth - itemHeight) / 2 }, { translateY: (itemWidth - itemHeight) / 2 }, ] 在这个垂直列表里，每个Item的壳容器 宽高是这样的 container: { height: itemWidth, //大 width: itemHeight, //小 } 把垂直的列表变成 水平列表，那么对列表反向旋转90度，即这样设 scrollContainer: { width: itemHeight * 2 + itemSpace * 2, //px2dp(139 * 2 + 17), height: px2dp(375), transform: [{ rotate: \"270deg\" }], }, ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-horizontal/:2:1","tags":["react-native"],"title":"横向 瀑布流列表","uri":"/zyestin/waterfall-list-horizontal/"},{"categories":null,"content":"脚手架 create-react-native-module ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:0:0","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"脚手架使用（顺利） 工具安装 npm install -g yarn npm install -g create-react-native-module 脚手架命令 create-react-native-module RemoteFont --object-class-name react-native-remote-font --object-class-name RemoteFontLoader --native-package-id com.yestin.font --platforms ios,android --github-account zyestin --author-name yestin --author-email zyestin@gmail.com --generate-example --example-react-native-template react-native@0.62 过程中发现，若不指定--example-react-native-template react-native@0.62，发现总有这样的报错日志 pod --version failure, aborting with broken example app Error while creating library module react-native-remote-font Error: Command failed with ENOENT: pod --version spawnSync pod ENOENT at Object.spawnSync (internal/child_process.js:1077:20) at Object.spawnSync (child_process.js:776:24) at Function.module.exports.sync (/usr/local/lib/node_modules/create-react-native-module/node_modules/execa/index.js:174:25) at module.exports.commandSync (/usr/local/lib/node_modules/create-react-native-module/node_modules/execa/index.js:235:15) at /usr/local/lib/node_modules/create-react-native-module/lib/lib.js:265:17 at new Promise (\u003canonymous\u003e) at /usr/local/lib/node_modules/create-react-native-module/lib/lib.js:223:18 成功的日志 CREATE new React Native module with the following options: name: RemoteFont full package name: react-native-remote-font is view: false object class name: RemoteFontLoader Android nativePackageId: com.yestin.font platforms: ios,android Apple tvosEnabled: false authorName: yestin authorEmail: zyestin@gmail.com author githubAccount: zyestin license: MIT useAppleNetworking: false generateExample: true exampleFileLinkage: false exampleName: example exampleReactNativeTemplate: react-native@0.62 writeExamplePodfile: false CREATE: Check for valid Yarn CLI tool version, as needed to generate the example project 1.22.21 yarn --version ok CREATE: Generating the React Native library module CREATE example app with the following template: react-native@0.62 ###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere ✔ Downloading template ✔ Copying template ✔ Processing template ✔ Installing CocoaPods dependencies (this may take a few minutes) Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd \"/Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example\" \u0026\u0026 npx react-native run-android Run instructions for iOS: • cd \"/Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example\" \u0026\u0026 npx react-native run-ios - or - • Open example/ios/example.xcworkspace in Xcode or run \"xed -b ios\" • Hit the Run button Run instructions for macOS: • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions. Linking the new module library to the example app yarn add v1.22.21 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning \"@react-native-community/eslint-config \u003e @typescript-eslint/eslint-plugin@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/parser@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react@7.12.4\" has incorrect peer dependency \"eslint@^3.0.0 || ^4.0.0 || ^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react-native@3.6.0\" has incorrect peer dependency \"eslint@^3.17.0 || ^4 || ^5\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/eslint-plugin \u003e tsutils@3.21.0\" ha","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:1:0","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"运行iOS（较顺利） 如RN0.62老样子，App成功启动了， 但弹窗报错React Native: Unexpected token ':'. Expected a ')' 这样改metro-react-native-babel-preset from 0.58.0 to 0.59.0 然后yarn install \u0026\u0026 npx pod-install 后， 重新Xcode run iOS就OK了 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:2:0","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"将自定义三方库代码写入（有坑） ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:3:0","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"输入 本库代码 直接在顶层目录 改三方库代码就行 因为example内所使用的react-native-remote-font文件，是软链，指向到顶层目录的 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:3:1","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"添加 其它依赖库（挺坑） 直接在package.json里添加如上依赖后，yarn \u0026\u0026 npx pod-install后，Xcode run 报错如下，多次这样后，还是报错。。。 error: Error: Unable to resolve module react-native-fs from /Users/yestin/Desktop/code_test/react-native/react-native-remote-font/index.js: react-native-fs could not be found within the project or in these directories: /Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example/node_modules If you are sure the module exists, try these steps: 1. Clear watchman watches: watchman watch-del-all 2. Delete node_modules and run yarn install 3. Reset Metro's cache: yarn start --reset-cache 4. Remove the cache: rm -rf /tmp/metro-* 10 | } from \"react-native\"; 11 | import React, { useEffect, useMemo, useRef, useState } from \"react\"; \u003e 12 | import RNFS from \"react-native-fs\"; | ^ 按照上面的提示，执行 watchman watch-del-all rm -rf node_modules yarn \u0026\u0026 npx pod-install 也终于在 node_modules下 能看到了 react-native-fs 此时，居然还没有好，报错 Invariant Violation: Native module cannot be null 因Xcode 并没有link到这个库的iOS代码RNFS，Xcode里完全搜不到 于是 往example/ios/Podfile里手动添加link pod 'RNFS', :path =\u003e '../node_modules/react-native-fs' 再npx pod-install后 就好了 我把这个临时方案提供到了create-react-native-module/issues/489# ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:3:2","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"写Demo测试 从 Google Fonts 扒一些字体链接 const fontInfoList = [ { fontName: \"Ma Shan Zheng\", fontUrl: \"https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMHsCoRTJKKTqxFXqIji1hn3wSpSEA3eSpJy0awdsFt2Zfc6SSE.119.woff2\", }, { fontName: \"Afacad\", fontUrl: \"https://fonts.gstatic.com/s/afacad/v1/6NUI8FKMIQOGaw6ahLYEvBjUVG5Ga92uVSQ-9kKlZfNfuw.ttf\", }, { fontName: \"Rubik Bubbles\", fontUrl: \"https://fonts.gstatic.com/s/rubikbubbles/v3/JIA1UVdwbHFJtwA7Us1BPFbRNTENfDxyRXI.ttf\", }, { fontName: \"Preahvihear\", fontUrl: \"https://fonts.gstatic.com/s/preahvihear/v29/6NUS8F-dNQeEYhzj7uluxswE49FJf8Wv.ttf\", }, ]; 测试的核心代码 \u003cArtText text=\"Hello World\" style={{ fontSize: 20, fontVariant: [\"proportional-nums\"] }} fontInfo={fontInfoList[fontInfoIndex]} /\u003e 同样，将安卓代码放进去 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:4:0","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"运行 Android（挺坑） yarn android报错 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:5:0","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"(1) Failed to transform react-native-0.71.0-rc.0-debug.aar * What went wrong: Execution failed for task ':react-native-remote-font:javaPreCompileDebug'. \u003e Could not resolve all files for configuration ':react-native-remote-font:debugCompileClasspath'. \u003e Failed to transform react-native-0.71.0-rc.0-debug.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-classes, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-api}. \u003e Execution failed for JetifyTransform: /Users/yestin/.gradle/caches/modules-2/files-2.1/com.facebook.react/react-native/0.71.0-rc.0/7a7f5a0af6ebd8eb94f7e5f7495e9d9684b4f543/react-native-0.71.0-rc.0-debug.aar. \u003e Java heap space 查到是RN的原因了，照着这个回答 react-native/issues/35210#issuecomment-1304536693 在react-native-remote-font/example/android/build.gradle添加如下代码 def REACT_NATIVE_VERSION = new File(['node', '--print',\"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version\"].execute(null, rootDir).text.trim()) allprojects { configurations.all { resolutionStrategy { // Remove this override in 0.66, as a proper fix is included in react-native itself. force \"com.facebook.react:react-native:\" + REACT_NATIVE_VERSION } } 再次 yarn android App成功安装启动，但依然报错 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:5:1","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"(2) 也遇到 Link问题 build error 找不到符号RNFSPackage /Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example/android/app/src/main/java/com/example/MainApplication.java:31: 错误: 找不到符号 packages.add(new RNFSPackage()); ^ 符号: 类 RNFSPackage * What went wrong: Execution failed for task ':app:compileDebugJavaWithJavac'. \u003e Compilation failed; see the compiler error output for details. 在build.gradle的dependencies {...}内添加 implementation project(':react-native-fs') build error ':react-native-fs' could not be found in project ':app' FAILURE: Build failed with an exception. * Where: Build file '/Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example/android/app/build.gradle' line: 197 * What went wrong: A problem occurred evaluating project ':app'. \u003e Project with path ':react-native-fs' could not be found in project ':app'. 在settings.gradle 添加 path include ':react-native-fs' project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android') 运行成功了，但弹窗报错 build error TypeError: null ... RNFSManager TypeError: null is not an object (evaluating 'RNFSManager.RNFSFileTypeRegular') 发现搜不到RNFSManager被引用的地方 于是在MainApplication.java中getPackages(){...}内添加 // react-native-fs import com.rnfs.RNFSPackage; packages.add(new RNFSPackage()); 至此，终于 不报错了。。。 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:5:2","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"发布 确认本地是否成功登陆npm认证成功 npm whoami zyestin 若未登录，则执行npm adduser 执行npm publish 报错，是因为我刚删除了同名库，想重发一个，却失败了。 而npm规则是 24小时才能发布刚删除的同名的包 18 http fetch PUT 403 https://registry.npmjs.org/react-native-remote-font 1544ms 19 verbose stack Error: 403 Forbidden - PUT https://registry.npmjs.org/react-native-remote-font - react-native-remote-font cannot be republished until 24 hours have passed. ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:6:0","tags":["react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":null,"content":"示例效果展示 切换到新字体，经过loading后，应用上新字体 切换到已加载过的字体，直接应用上 iOS Android ","date":"2023-11-01","objectID":"/zyestin/art-text/:1:0","tags":["react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":null,"content":"使用/Usage 封装后，如下这样使用，解耦的干干净净 import { StyleSheet, Text, TouchableOpacity, View } from \"react-native\"; import React, { useState } from \"react\"; import ArtText from \"./ArtText\"; const ArtTextDemo = () =\u003e { const [fontInfoIndex, setFontInfoIndex] = useState(0); return ( \u003cView style={{ flex: 1, padding:100 }}\u003e \u003cTouchableOpacity style={{padding:10}} onPress={() =\u003e { setFontInfoIndex((fontInfoIndex + 1) % fontInfoList.length); }} \u003e \u003cText\u003e{\"Switch Font\"}\u003c/Text\u003e \u003c/TouchableOpacity\u003e \u003cText style={{ marginVertical: 20 }}\u003e {\"Current font - \" + fontInfoIndex + \" - \" + fontInfoList[fontInfoIndex].fontName} \u003c/Text\u003e \u003cArtText text=\"Hello World\" style={{ fontSize: 20 }} fontInfo={fontInfoList[fontInfoIndex]} /\u003e \u003c/View\u003e ); }; const fontInfoList = [ { fontName: \"美呗嘿嘿体\", fontUrl: \"https://imgcn.cdn.com/app/download/fonts/meibeiheiehiti2.ttf\", }, ... ]; ","date":"2023-11-01","objectID":"/zyestin/art-text/:2:0","tags":["react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":null,"content":"源码/Code RN组件 ArtText.js iOS桥接类 CustomFontManager.h CustomFontManager.m Android桥接类 WordArtModule.java ","date":"2023-11-01","objectID":"/zyestin/art-text/:3:0","tags":["react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":null,"content":"逻辑解读 1.切换字体背后 会经历什么 判断若是新字体，需要经历如下过程，使字体达到可以应用到Text组件里的状态 字体文件夹不存在则创建 下载字体到指定路径 通过原生层处理使得字体达到可应用状态 若是切换到旧字体会省略其中一些步骤 2.为什么有个「可应用」状态 这是由iOS、安卓原生决定的 iOS 不仅需要下载到本地就完事了，还需要加载到内存，再设置RN的Text组件的fontFamily就不会报错/失效了 Android 则是需要拿到Text组件所对应的原生对象，通过将JS层的target ID传到原生去，在原生层去应用字体的 3.其中有哪些需要注意的？ RN应用 所下载的远程字体，不仅应用起来麻烦 需要原生层处理一道，而且在style的设置上还要做特别处理规避bug，并且两端还有差异，如下 iOS，若在字体未达到可应用状态时，提前为Text设置了fontFamily，App在debugging时会发生报错。。。 Android，通过原生去设置远程下载的字体，若再在style里设置fontFamily，竟然会导致字体会应用失效。。。 BTW：文章开头的示例效果，所对应的Demo ArtTextDemo 后来，基于这份代码，制作了一个npm库 react-native-remote-font ","date":"2023-11-01","objectID":"/zyestin/art-text/:3:1","tags":["react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":null,"content":"2023最新 hugo + github pages 使用方式 网上大多是hugo旧版的使用方式，有好几处明显差异的，不值得借鉴，反正我借鉴后出现各种莫名其妙问题 严格按照官方这两个链接，就不会出现问题: hugo quick start hugo new site quickstart cd quickstart git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo \"theme = 'ananke'\" \u003e\u003e hugo.toml hugo server hugo new content posts/my-first-post.md open content/posts/my-first-post.md //然后进行修改 hugo server -D //可以编辑后， 在 http://localhost:1313/ 进行预览 hugo //生成web静态资源，以便下一步提交github时进行部署 Host on GitHub Pages 需要注意的地方: 请先尝试 hugo文档里提供的theme，即ananke，走通一遍流程 我就采坑了，使用了另一个theme，后面在 localhost 一直不出现 my-first-post.md .github/workflows/hugo.yaml 一定要注意修改 HUGO_VERSION 的值 my-first-post.md 注意删掉/注释掉 draft:true 这样 push到github时，public/index.html等几个文件中才包含了 my-first-post.md的内容，访问 https://zyestin.github.io/zyestin/ 时才能找到 my-first-post.md入口 ","date":"2023-08-24","objectID":"/zyestin/hugo-usage/:0:0","tags":null,"title":"hugo + github pages usage","uri":"/zyestin/hugo-usage/"}] \ No newline at end of file +[{"categories":["react-native"],"content":"MasonryFlashList 瀑布流布局列高不均 解决方案 瀑布流布局列高不均 演示效果 最终我对此做了回复 👉🏻 issues/946#issuecomment-1972392998 ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:0:0","tags":["best-practice","react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":["react-native"],"content":"方法1：【仅解决了双列】58的方案 方案源码 👉🏻 https://github.com/jiangleo/react-native-classroom/blob/main/src/11_Waterfall/lib/RecyclerListView/WaterfallLayoutProvider.ts 但，只修改为了 支持双列瀑布流布局，也不是基于最新recyclerlistview版本 58大佬分析的 recyclerlistview的布局原理，Nice ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:1:0","tags":["best-practice","react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":["react-native"],"content":"方法2：【较完美的】Masonry layout manager and provider #526 方案 可惜，并没有被merge，作者似乎不再关注这个项目了。 然后，也没有提供patch，但有人提供了package 和 Demo，非常赞！ 👉🏻 方案来源 package: recyclerlistview-masonrylayoutmanager Demo: https://snack.expo.dev/@robertli93/grid_example Demo效果非常棒！ 滚动流畅 + 布局均匀 为何未被合并？ 难道是因为PR评论区的已知小bug？还是作者不再维护？ ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:2:0","tags":["best-practice","react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":["react-native"],"content":"方法3:【最完美】MasonryFlashList 本身支持优化排列 见官方文档 masonry#optimizeitemarrangement If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false. 在看源码时，发现MasonryFlashList.tsx中，底部可见如下说明 * FlashList variant that enables rendering of masonry layouts. * If you want `MasonryFlashList` to optimize item arrangement, enable `optimizeItemArrangement` and pass a valid `overrideItemLayout` function. optimize Item Arrangement，即 优化Item的布置/排列 布局规则 核心代码 默认分配规则 columnCount列，对应dataSet下有多少个数组，对应有多少个FlashList dataSet下各数组(各列表数据) 是根据i % columnCount在数量上公平分配的 optimizeItemArrangement 排列规则 optimizeItemArrangement，则改为 基于列高度累计上公平分配。 每次分配前，通过columnHeightTracker[j] \u003c columnHeightTracker[nextColumnIndex]判断，每次把Item分配给 高度累计最少的那一列 基于此，做如下改动 对底层封装组件BaseList，增加 入参 - 高度计算函数sizeForItem 注意：其中还为dataList中的各个元素 增加了cache键，用于缓存各种计算值 附: BaseList源码 👉🏻 base 在Item组件中，增加 高度计算函数实现 export const sizeForItem = (item) =\u003e { const { previewUri, title, tags, cache } = item; console.log(\"item.cache:\", item.cache); //使用缓存高度，避免重复计算，减少性能消耗 if (cache[kHeightCacheKey]) return cache[kHeightCacheKey] + px2dp(15); let imageHeight = getHeightFromSize(parseSize(previewUri)) || imageSize; cache[kImageHeightCacheKey] = imageHeight; let titleH = getHeightWithText({ text: title, fontSize: styles.title.fontSize, lineHeight: styles.title.lineHeight, maxNumberOfLines: 2, maxWidth: cellWidth - styles.title.paddingHorizontal * 2, }); cache[kTitleHeightCacheKey] = titleH; let totalH = Math.ceil(imageHeight) + cellBorderWidth * 2 + Math.ceil(styles.title.marginTop) + Math.ceil(titleH) + Math.ceil(tags?.[0] ? px2dp(5) : 0) + Math.ceil(tags?.[0] ? px2dp(20) : 0) + Math.ceil(px2dp(30)); cache[kHeightCacheKey] = totalH; return totalH + px2dp(15); }; 注意: 实际上， 组件自适应高度 与 计算所得高度 有点偏差，会导致列表数据刷多了后，仍会出现两列分布不均 于是，上面代码中每个(带text的)组件高度计算后，需要向上取整，比如 23.3 -\u003e 24 并且，将计算的各组件高度，缓存到cache对象中，并且将使用这些值 设为组件style中的height 这样就避免了 组件自适应高度 与 计算高度 之间的偏差！！ 另外， 调用sizeForItem时，优先使用缓存高度，避免重复计算，减少性能消耗 附: 1种Item使用源码 👉🏻 ImageTextFeed 高度计算对比了2个，发现58的方案更好 源码: https://github.com/jiangleo/react-native-classroom/blob/d09d5a6937f9e8b3b9878566e6a251a814705739/src/12_HomePage/utils/getNumberOfLine.ts#L32 ","date":"2024-03-05","objectID":"/zyestin/waterfall-perfect/:3:0","tags":["best-practice","react-native"],"title":"瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存","uri":"/zyestin/waterfall-perfect/"},{"categories":["react-native"],"content":"有这么一个常见的需求 在对某个帖子进行点赞后，该帖子所出现的各个地方，e.g.帖子列表(可能多处)、帖子详情(可能多个)，点赞状态实时同步、数量加/减1同步。 ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:0:0","tags":["best-practice","react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":["react-native"],"content":"iOS 方案 在iOS，我是在每个帖子 所对应的 Model(数据)对象里 监听通知，判断 帖子ID，ID匹配 则更新 点赞状态，以此达到操作点赞后 实时同步同一帖子的点赞状态，非常简单好使！ ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:1:0","tags":["best-practice","react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":["react-native"],"content":"RN 方案 但RN里，数据是一个{id:xx, ...}这样的对象，是不支持像在iOS那样，在这样对象里 写监听通知的代码的。 于是，那就放到hooks去实现。 Q：那需要什么样的hooks呢？ A：也就是需要怎样的 设计最优雅的API，or调用方式 （如下），才是决定了设计什么样的hooks函数 ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:2:0","tags":["best-practice","react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":["react-native"],"content":"最优雅API 调用方式 const PostComp = () =\u003e { const { isActive: liked, activeCount: likeCount, changeActiveStatus: changeLikeStatus, } = useActiveStatus({ id: id, originalActiveCount: originalLikeCount, originalActiveStatus: originalLikedStatus, notificationKey: kPostLikeStatusChangeNotification, requestFunc: ({ isActive }) =\u003e { return likePost({ postId: id, isLike: isActive }); // send request to toggle liked status }, }); return ( \u003cView\u003e \u003cIcon liked={liked} /\u003e \u003cText\u003e{likeCount}\u003c/Text\u003e \u003cButton onPress={() =\u003e { changeLikeStatus() }} /\u003e \u003c/View\u003e ) } useActiveStatus这个hooks的实现源码， 如下 ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:2:1","tags":["best-practice","react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":["react-native"],"content":"源码 把iOS Model里的通知 放到hooks函数里，如下 源码useActiveStatus import { useEffect, useState } from \"react\"; import { listen, emit } from \"app/utils/Notification/index\"; /** * 0 1 状态管理工具 * @param {function} id 目标对象id * @param {string} props.notificationKey active状态变化时 发出通知名称 * @param {boolean} props.originalActiveCount 初始active数量 * @param {boolean} props.originalActiveStatus 初始active状态 * @param {function} props.requestFunc({id, isActive}) active状态变更函数 * @returns {boolean} isActive * @returns {number} activeCount * @returns {function} changeActiveStatus() */ export default function useActiveStatus(props) { const { notificationKey, originalActiveCount, originalActiveStatus, requestFunc, id, } = props; const [isActive, setIsActive] = useState(originalActiveStatus); const [activeCount, setActiveCount] = useState(originalActiveCount); useEffect(() =\u003e { setIsActive(originalActiveStatus); }, [originalActiveStatus, id]); useEffect(() =\u003e { setActiveCount(originalActiveCount); }, [originalActiveCount, id]); useEffect(() =\u003e { const listener = listen(notificationKey, ({ id: _id, isActive }) =\u003e { // console.log(\"useActiveStatus:\", isActive); if (_id == id) { if (isActive) { setActiveCount(activeCount + 1); } else { setActiveCount(activeCount - 1 \u003e= 0 ? activeCount - 1 : 0); } setIsActive(isActive); } }); return () =\u003e { listener.remove(); }; }, [isActive, requestFunc, notificationKey, id, activeCount]); const changeActiveStatus = () =\u003e { return requestFunc({ isActive }).then((res) =\u003e { console.log(\"changeFollowStatus:\", notificationKey, id, !isActive); emit(notificationKey, { id: id, isActive: !isActive, }); return Promise.resolve(); }); }; return { isActive, activeCount, changeActiveStatus, }; } ","date":"2023-12-18","objectID":"/zyestin/status-sync-global/:2:2","tags":["best-practice","react-native"],"title":"最佳实践 点赞(收藏等)状态的全局同步更新","uri":"/zyestin/status-sync-global/"},{"categories":["react-native"],"content":"用了3年RN了，第一次给RN提交PR，有点激动，值得记录呀！ ","date":"2023-12-18","objectID":"/zyestin/rn-pull-request/:0:0","tags":["contribution","react-native"],"title":"第一次提交PR给react-native","uri":"/zyestin/rn-pull-request/"},{"categories":["react-native"],"content":"操作记录 git操作全在github完成 2023.12.05 7:52PM 提交 fork -\u003e 创建分支 -\u003e 改代码 -\u003e 提交 然后进入pull request tab ，就能看到Compare \u0026 pull request入口，点击它 生成的PR地址： https://github.com/facebook/react-native/pull/41803 然后就进入 PR描述编辑区，按提示编辑完，提交即可 首次提交PR，提示需要签署CLA 跳转到这里 https://github.com/facebook/react-native/pull/41803/checks?check_run_id=19326140445 再打开 https://code.facebook.com/cla， 进行签署CLA 签署后，这个页面就进入一个无法编辑的状态，虽然顶部有提示，如果在签CLA之前已经提交了一个，再耐心等待会，会自动处理的 👉🏻这个友人的经历是很好的借鉴 于是，从21:49，等啊等，到了 23:54，才有反馈 第二天早上一看 10:13，还给了我建议，我点击一下 Commit suggestion就ok了 最后就差maintainer批准了 一般多久批准呢？ 浏览了2个merged的PR，都是2天 2023.12.13 11:24PM 终于收到邮件 PR被合并 This pull request was successfully merged by @zyestin in 5217cc9. 并且紧接着收到邮件 PR被关闭 Closed #41803 via 5217cc9. 那何时 带有我贡献的代码 会被发布呢？ 等待下一个版本被推出的时候咯 待续~ ","date":"2023-12-18","objectID":"/zyestin/rn-pull-request/:1:0","tags":["contribution","react-native"],"title":"第一次提交PR给react-native","uri":"/zyestin/rn-pull-request/"},{"categories":["react-native"],"content":"ScrollView滚动动画 实现起来就很容易 源码 展开查看 import React, { useRef, useEffect } from \"react\"; import { ScrollView, Text, View, Animated, Easing } from \"react-native\"; /** * ScrollView自动滚动了！ */ const AutoScrollScrollView = () =\u003e { const scrollViewRef = useRef(); const scrollY = useRef(new Animated.Value(0)).current; const contentHeight = 1000; // 你的内容高度 const scrollDuration = 5000; // 滚动动画的持续时间（毫秒） useEffect(() =\u003e { const startScrollAnimation = () =\u003e { Animated.timing(scrollY, { toValue: contentHeight, duration: scrollDuration, easing: Easing.linear, useNativeDriver: false, }).start(() =\u003e { // 滚动到顶部并重新开始动画 scrollY.setValue(0); startScrollAnimation(); }); }; startScrollAnimation(); }, []); return ( \u003cScrollView ref={scrollViewRef} contentContainerStyle={{ height: contentHeight }} onScroll={(event) =\u003e { const offsetY = event.nativeEvent.contentOffset.y; // 可以在滚动时执行一些其他操作 }} scrollEventThrottle={16} \u003e \u003cAnimated.View style={{ height: contentHeight, transform: [{ translateY: scrollY }], }} \u003e \u003cText\u003eScrolling Content\u003c/Text\u003e {/* 这里可以放置你的滚动内容 */} \u003c/Animated.View\u003e \u003c/ScrollView\u003e ); }; export default AutoScrollScrollView; ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-autoscroll/:1:0","tags":["react-native"],"title":" 实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画","uri":"/zyestin/waterfall-list-autoscroll/"},{"categories":["react-native"],"content":"非ScrollView类的列表 滚动动画 然而，FlatList 、flashList、masonryFlashList要实现自动滚动动画， 却用不了ScrollView同样的方式，实现起来就很曲折，经过各种尝试均失败，无奈，使用定时器方式实现了， 效果图： 源码如下 import React, { useRef, useEffect, useState } from \"react\"; import { FlatList, View, Text } from \"react-native\"; import { MasonryFlashList } from \"@shopify/flash-list\"; const data = Array.from({ length: 20 }, (_, index) =\u003e ({ key: index.toString(), text: `Item ${index}`, })); const renderItem = ({ item }) =\u003e ( \u003cView style={{ height: 100, justifyContent: \"center\", alignItems: \"center\", }} \u003e \u003cText\u003e{item.text}\u003c/Text\u003e \u003c/View\u003e ); const SlowScrollFlatList = ({ duration }) =\u003e { const flatListRef = useRef(); const scrollDistance = 2; // 控制每次滚动的距离 const scrollInterval = 20; // 每次滚动之间的间隔时间（毫秒） const [isDragging, setIsDragging] = useState(false); const scrollIntervalId = useRef(null); const currentScrollDistance = useRef(0); const totalScrollDistance = 100 * (data.length - 1); const scroll = () =\u003e { if (currentScrollDistance.current \u003c totalScrollDistance \u0026\u0026 !isDragging) { const nextDistance = Math.min( totalScrollDistance, currentScrollDistance.current + scrollDistance ); flatListRef.current.scrollToOffset({ offset: nextDistance, animated: false, }); currentScrollDistance.current = nextDistance; } }; const startAutoScroll = () =\u003e { scrollIntervalId.current = setInterval(scroll, scrollInterval); }; // 监听FlatList的滚动位置 const onScroll = (event) =\u003e { currentScrollDistance.current = event.nativeEvent.contentOffset.y; }; useEffect(() =\u003e { const stopAutoScroll = () =\u003e { clearInterval(scrollIntervalId.current); }; flatListRef.current.scrollToOffset({ offset: currentScrollDistance.current, animated: false, }); startAutoScroll(); // 初始启动自动滚动 return () =\u003e { stopAutoScroll(); }; }, [isDragging]); return ( // \u003cFlatList // ref={flatListRef} // data={data} // renderItem={renderItem} // keyExtractor={(item) =\u003e item.key} // onScrollBeginDrag={() =\u003e setIsDragging(true)} // onScrollEndDrag={() =\u003e { // setIsDragging(false); // startAutoScroll(); // 用户停止拖动后，重新启动自动滚动 // }} // onScroll={onScroll} // // 设置其他 FlatList 的属性 // /\u003e \u003cMasonryFlashList ref={flatListRef} estimatedItemSize={/* itemStyles.container.height */ 100} data={data} keyExtractor={(item, index) =\u003e item?.key} initialNumToRender={5} numColumns={2} renderItem={renderItem} showsVerticalScrollIndicator={false} onScrollBeginDrag={() =\u003e setIsDragging(true)} onScrollEndDrag={() =\u003e { setIsDragging(false); startAutoScroll(); // 用户停止拖动后，重新启动自动滚动 }} onScroll={onScroll} /\u003e ); }; export default SlowScrollFlatList; 核心逻辑： 每间隔 scrollInterval ms，滚动 scrollDistance 小步距离 当 scrollInterval足够小，在1/60s 即16ms左右时，就类似于流畅的每秒60帧动画了 根据实际的效果，调节scrollInterval 、scrollDistance 大小，使达到满意的效果 ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-autoscroll/:2:0","tags":["react-native"],"title":" 实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画","uri":"/zyestin/waterfall-list-autoscroll/"},{"categories":["react-native"],"content":"实际场景应用 请前往 慢速自动滚动的横向瀑布流列表 ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-autoscroll/:2:1","tags":["react-native"],"title":" 实现 FlatList 、flashList、masonryFlashList 各种列表的自动滚动动画","uri":"/zyestin/waterfall-list-autoscroll/"},{"categories":["react"],"content":"常用hooks依赖检查，从源头提醒避免奇葩bug https://github.com/facebook/react/issues/14920 ESLint提供，检查useEffect依赖 \u0026\u0026 autoFix， 用上后 估计能大大降低 无法获取state最新值、漏掉依赖后奇怪的bug ","date":"2023-11-01","objectID":"/zyestin/tool-dev-react/:1:0","tags":["react","tool"],"title":"hooks开发工具","uri":"/zyestin/tool-dev-react/"},{"categories":["npm"],"content":" patch-package 补丁工具使用 ","date":"2023-11-01","objectID":"/zyestin/tool-npm/:0:0","tags":["tool","npm"],"title":"npm 工具","uri":"/zyestin/tool-npm/"},{"categories":["npm"],"content":"patch-package 官方地址 https://www.npmjs.com/package/patch-package ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:0:0","tags":["tool","npm"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":["npm"],"content":"首次安装 失败\u0026\u0026解决 package.json内scripts下 添加 \"postinstall\": \"patch-package\" 安装，失败 npm i patch-package 10:18:05 npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED npm ERR! FetchError: request to https://mirrors.huaweicloud.com/repository/npm/patch-package failed, reason: connect ECONNREFUSED 127.0.0.1:1087 npm ERR! at ClientRequest.\u003canonymous\u003e (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) npm ERR! at ClientRequest.emit (events.js:400:28) npm ERR! at onerror (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:101:9) npm ERR! at callbackError (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:123:5) npm ERR! at processTicksAndRejections (internal/process/task_queues.js:95:5) npm ERR! FetchError: request to https://mirrors.huaweicloud.com/repository/npm/patch-package failed, reason: connect ECONNREFUSED 127.0.0.1:1087 npm ERR! at ClientRequest.\u003canonymous\u003e (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) npm ERR! at ClientRequest.emit (events.js:400:28) npm ERR! at onerror (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:101:9) npm ERR! at callbackError (/usr/local/lib/node_modules/npm/node_modules/agent-base/index.js:123:5) npm ERR! at processTicksAndRejections (internal/process/task_queues.js:95:5) { npm ERR! type: 'system', npm ERR! errno: 'ECONNREFUSED', npm ERR! code: 'ECONNREFUSED' npm ERR! } npm ERR! npm ERR! If you are behind a proxy, please make sure that the npm ERR! 'proxy' config is set properly. See: 'npm help config' npm ERR! A complete log of this run can be found in: npm ERR! /Users/yestin/.npm/_logs/2022-07-14T02_30_35_701Z-debug.log ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:1:0","tags":["tool","npm"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":["npm"],"content":"搜 https://segmentfault.com/a/1190000023314583 solution: # 配置指向源 $ npm config set registry http://registry.npm.taobao.org 配置前 ~/workspace/ihuaben-app dev_zy_i *2 !1 \u003e npm config list 1m 12s 10:34:40 ; cli configs metrics-registry = \"https://mirrors.huaweicloud.com/repository/npm/\" scope = \"\" user-agent = \"npm/6.14.15 node/v14.18.3 darwin x64\" ; userconfig /Users/yestin/.npmrc home = \"https://npm.taobao.org\" registry = \"https://mirrors.huaweicloud.com/repository/npm/\" ; node bin location = /usr/local/bin/node ; cwd = /Users/yestin/workspace/ihuaben-app ; HOME = /Users/yestin ; \"npm config ls -l\" to show all defaults. 配置后 npm config list 10:39:05 ; cli configs metrics-registry = \"http://registry.npm.taobao.org/\" scope = \"\" user-agent = \"npm/6.14.15 node/v14.18.3 darwin x64\" ; userconfig /Users/yestin/.npmrc home = \"https://npm.taobao.org\" registry = \"http://registry.npm.taobao.org/\" ; node bin location = /usr/local/bin/node ; cwd = /Users/yestin/workspace/ihuaben-app ; HOME = /Users/yestin ; \"npm config ls -l\" to show all defaults. 然后 安装成功 npm i patch-package 10:39:10 npm WARN @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.14.5 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself. npm WARN @babel/plugin-proposal-class-static-block@7.14.5 requires a peer of @babel/core@^7.12.0 but none is installed. You must install peer dependencies yourself. npm WARN @react-native-community/cameraroll@1.2.1 requires a peer of react-native@\u003e=0.57 \u003c=0.59 but none is installed. You must install peer dependencies yourself. ... + patch-package@6.4.7 added 12 packages from 23 contributors and removed 153 packages in 40.037s 52 packages are looking for funding run `npm fund` for details yarn yarn add patch-package postinstall-postinstall 41s 10:40:04 yarn add v1.22.19 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] 🔍 Resolving packages... info There appears to be trouble with your network connection. Retrying... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning \"hox \u003e react-reconciler@0.25.1\" has incorrect peer dependency \"react@^16.13.1\". warning \" \u003e mobx-react@5.3.5\" has unmet peer dependency \"mobx@^4.0.0 || ^5.0.0\". warning \" \u003e react-native-elements@3.4.2\" has unmet peer dependency \"react-native-safe-area-context@^3.1.9\". warning \" \u003e react-native-elements@3.4.2\" has incorrect peer dependency \"react-native-vector-icons@\u003e7.0.0\". warning \" \u003e react-native-fs@2.18.0\" has unmet peer dependency \"react-native-windows@*\". warning \" \u003e react-native-head-tab-view@2.1.7\" has incorrect peer dependency \"@react-native-community/viewpager@^3.3.0\". warning \" \u003e react-native-iap@6.2.1\" has incorrect peer dependency \"react@\u003e=16.13.1\". warning \"react-native-router-flux \u003e react-navigation-stack@1.10.3\" has incorrect peer dependency \"react-native-screens@^1.0.0 || ^1.0.0-alpha\". warning \" \u003e react-native-selfadapt-modal@1.1.3\" has incorrect peer dependency \"react-native@^0.41.2\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/eslint-plugin@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/parser@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react@7.12.4\" has incorrect peer dependency \"eslint@^3.0.0 || ^4.0.0 || ^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react-native@3.6.0\" has incorrect peer dependency \"eslint@^3.17.0 || ^4 || ^5\". [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 10 new dependencies. info Direct dependencies ├─ patch-package@6.4.7 ├─ postinstall-postinstall@2.1.0 ├─ react-native-gesture-handler@1.10.3 └─ react-native-head-tab","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:2:0","tags":["tool","npm"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":["npm"],"content":"优势 一人 操作下面3步，其它人完全无感知，npm i时 自动完成补丁的应用 //package.json \"scripts\": { + \"postinstall\": \"patch-package\" } npm i patch-package npx patch-package libxx ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:3:0","tags":["tool","npm"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":["npm"],"content":"遇到过的bug ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:4:0","tags":["tool","npm"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":["npm"],"content":"执行npm i，react-native-image-crop-picker+0.38.0.patch apply会失败 方法1 删三方库重新安装（较快） rm -rf node_modules/react-native-image-crop-picker \u0026\u0026 npm i 方法2 于是照着react-native-image-crop-picker+0.38.0.patch改文件里的源码，再次执行 npx patch-package react-native-image-crop-picker --include 'PickerModule.java' 发现react-native-image-crop-picker+0.38.0.patch什么也没改 然后执行npm i就成功了 后来发现原因，如下，.patch文件中，会出现好多行 带有绝对路径/Users/...的文件路径 -#Wed Jun 29 16:49:45 CST 2022 -/Users/lsye/ihuaben-app/node_modules/react-native-picker/android/src/main/res/layout/picker_view_linkage.xml=/Users/lsye/ihuaben-app/node_modules/react-native-picker/android/build/intermediates/packaged_res/debug/layout/picker_view_linkage.xml ... 可能是同事执行时，出现异常情况了 ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:4:1","tags":["tool","npm"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":["npm"],"content":"执行npx patch-package react-native-xx, .patch会出现许多多余的文件字符串 ... index 408362c..5fd7d55 100644 Binary files a/node_modules/react-native-picker/android/build/intermediates/runtime_library_classes/release/classes.jar and b/node_modules/react-native-picker/android/build/intermediates/runtime_library_classes/release/classes.jar differ diff --git a/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/.DS_Store b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/.DS_Store new file mode 100644 index 0000000..7a08108 Binary files /dev/null and b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/.DS_Store differ diff --git a/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java index c52b1a7..7990d96 100644 --- a/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java +++ b/node_modules/react-native-picker/android/src/main/java/com/beefe/picker/view/OnItemSelectedRunnable.java @@ -10,6 +10,10 @@ final class OnItemSelectedRunnable implements Runnable { @Override public final void run() { - loopView.onItemSelectedListener.onItemSelected(loopView.getSelectedItem(),loopView.getSelectedIndex()); + try { + loopView.onItemSelectedListener.onItemSelected(loopView.getSelectedItem(), loopView.getSelectedIndex()); + } catch (Exception e) { + e.printStackTrace(); + } } } 原因是 安卓build之后的产物，在执行npx patch-package ...时 被莫名其妙带进去了 解决方案 方法1 可以把改后的文件拷贝出来，将三方库删了重装，再覆盖 拷贝的文件，再执行npx patch-package ... 方法2 使用绝对路径 npx patch-package react-native-xx --include 'file1|file2' ","date":"2023-11-01","objectID":"/zyestin/tool-npm-patch/:4:2","tags":["tool","npm"],"title":"patch-package 补丁工具使用","uri":"/zyestin/tool-npm-patch/"},{"categories":["react-native"],"content":"\u2028","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:0:0","tags":["tool","react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":["react-native"],"content":"插件 代码智能提示 copilot 触发内联建议 Option (⌥)+\\ https://docs.github.com/zh/copilot/configuring-github-copilot/configuring-github-copilot-in-your-environment?tool=vscode#keyboard-shortcuts-for-macos (键联提示)代码片段 ES7+ React/Redux/React-Native snippets massCode assistant (配合打开massCode App使用) 标签修改 自动首尾同步 Auto Rename Tag 拼写检测 Code Spell Checker 格式化 prettier 提升阅读感受 Gitlens 悬停查看代码改动人 Material Icon Theme / vscode-icons 侧边导航区 目录展示icon indent-rainbow 标签开闭连线 Image Preview 在图片路径引用行 左侧展示icon ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:1:0","tags":["tool","react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":["react-native"],"content":"code snippets React/Redux/React-Native snippets 指令说明： https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md 优点： 对常用的hooks支持的简直完美 可以试试输入useeff...。 会提示useEffectSnippet，enter后挨个填词，tab切换光标，set方法自动驼峰，简直完美！ 使用rnfes创建组件，会根据文件名 命名组件 想根据英文记忆一下快捷指令名称，可以参考 Fullstack React/React Native snippets 对快捷指令 都有英文解释 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:2:0","tags":["tool","react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":["react-native"],"content":"Mac、VSC快捷键 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:3:0","tags":["tool","react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":["react-native"],"content":"Mac 系统自带 (shift+) ctrl+ (option+\u0010\u000e) f/b (shift+) ctrl+ p/n VSC 更改了上述快捷键对应的指令，非常糟糕。可以调整下如下 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:3:1","tags":["tool","react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":["react-native"],"content":"VSC Next Change （Important） terminal、editor互切 focus到终端: cmd+j focus到editor: (ctrl+)shift+tab cmd+1 光标移动到函数头尾、标签头尾 cmd+shift+\\: 跳转至{ }、跳转至\u003c \u003e 选中 括号内代码 支持不断 扩张/收缩 选中 { \"key\": \"ctrl+s\", \"command\": \"editor.action.smartSelect.expand\", \"when\": \"editorTextFocus\" }, { \"key\": \"ctrl+shift+s\", \"command\": \"editor.action.smartSelect.shrink\", \"when\": \"editorTextFocus\" }, 光标移动多行 插件line-jumper 配成(shift+)ctrl+option+p/n 插件Space Block Jumper 跳转到临近的空行(选中) 居然无法设置 这几个键组合ctrl+cmd+p Next Problem cmd+(shift+)' 常用于写代码时要import，故意写error，然后在顶部import结束后，再快速跳回error处继续写代码 导航区(explorer view)定位当前编辑文件 { \"key\": \"shift+cmd+j\", \"command\": \"workbench.files.action.showActiveFileInExplorer\", \"when\": \"editorFocus\" } 其它更改VSCode的自定义快捷键 更新于 2023.07.26 keybindings 这是一份我常用的、好用的VSC自定义快捷键备份。 为什么要改？ 因为，当Mac的快捷键与VSC冲突时，当好用的插件快捷键与VSC冲突时，当VSC自带的快捷键失灵时，一般就需要更改VSC的 keybindings.json文件了 ","date":"2023-11-01","objectID":"/zyestin/vscode-efficient/:3:2","tags":["tool","react-native"],"title":"React Native 在VSCode编码提效","uri":"/zyestin/vscode-efficient/"},{"categories":["react-native"],"content":"一些业务的最佳实践探索 基础组件封装 瀑布流列表base组件 图片base组件 … 实现 模仿抖音、小红书 输入 #标签 高亮 瀑布流列表 瀑布流最佳实践：双列均匀分布，高度计算\u0026缓存 实现 瀑布流列表·自动滚动动画 实现 横向·瀑布流列表 实现 仿抖音/小红书 对贴图/贴字 进行拖拽、缩放、旋转等复杂手势 封装一个 易用的、远程字体动态下载\u0026应用组件 封装一个 低耦合、易用的文本输入框弹窗 实现 差不多理想的极简RN弹窗 最佳实践 点赞(收藏等)状态的全局同步更新 实践 列表Item精确曝光埋点 [todo] 实践 多tab多列表滑动吸顶效果 [todo] 实践 服务端下发自定义组件代码 前端接收\u0026渲染[todo] 实践 拆包 [todo] ","date":"2023-11-01","objectID":"/zyestin/readme/:1:0","tags":["contribution","react-native"],"title":"React Native 开发沉淀","uri":"/zyestin/readme/"},{"categories":["react-native"],"content":"组件库 易用的应用远程字体的text组件库 - react-native-remote-font ","date":"2023-11-01","objectID":"/zyestin/readme/:2:0","tags":["contribution","react-native"],"title":"React Native 开发沉淀","uri":"/zyestin/readme/"},{"categories":["react-native"],"content":"其它（提效、工具、学习…) 探究 代码规范 React Native 编码提效 on VSCode 用脚手架 制作一个RN库 放npm(含踏坑记录) 贡献给react-native的第一个PR React学习收获 学习《React Hooks 核心原理与实战》笔记 常用hooks依赖检查，从源头提醒避免奇葩bug … npm 好用工具 patch-package 补丁工具使用 … 从0到1用Jenkins实现对RN项目一键打包、发布 ","date":"2023-11-01","objectID":"/zyestin/readme/:3:0","tags":["contribution","react-native"],"title":"React Native 开发沉淀","uri":"/zyestin/readme/"},{"categories":["react"],"content":" 学习《React Hooks 核心原理与实战》笔记 hooks开发工具 常用hooks依赖检查，从源头提醒避免奇葩bug[todo] … ","date":"2023-11-01","objectID":"/zyestin/course-react/:0:0","tags":["learn","react"],"title":"React 学习","uri":"/zyestin/course-react/"},{"categories":["react-native"],"content":"需求 仿抖音、小红书，图片视频编辑区，贴图、贴文字功能 View支持拖拽 View右下角有一个icon比较特殊，该icon可控制View缩放 icon随手指移动 View缩放（以View中心点为圆心） View会旋转（以View为中心点为圆心） icon位置一直保持在View右下角 View支持双指捏 进行缩放 效果图 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:1:0","tags":["best-practice","react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":["react-native"],"content":"源码 HBMultiGestureView.js calculator.js CornerToolGestureView.js ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:0","tags":["best-practice","react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":["react-native"],"content":"解读 HBMultiGestureView.js 使用的什么手势api？ 通过PanResponder为Animted.View添加手势 将不同的手势操作 处理为拖拽、旋转、缩放等UI表现，从哪着手？ 通过手势回调onPanResponderGrant、onPanResponderMove、onPanResponderRelease去 如何判断 确定是否操作的右下角特殊icon视图？ 右下角icon onLoad后，拿到target，通过入参rotateScaleTargetRef传递给HBMultiGestureView，HBMultiGestureView内 通过手势回调参数中的e.nativeEvent.target获取所操作的视图target，比较判断是否相等 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:1","tags":["best-practice","react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":["react-native"],"content":"解读 calculator.js 里面都是公式函数，用在HBMultiGestureView.js 中，处理这些核心计算： 计算两指连成的直线移动后的 角度， 从而确定 双指操作时的旋转角度 计算两指移动后与移动前相比 两指连线的倍数关系， 从而确定 双指操作时的放大倍数 计算A点、初始触摸位置B点、当前触摸位置C点，计算AC/AB放大比例， 从而确定单指拖动右下角按钮时的放大倍数 注：A点，即触摸开始时 视图的中心位置 计算向量AC与AB的夹角， 从而确定单指拖动右下角按钮时的旋转角度 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:2","tags":["best-practice","react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":["react-native"],"content":"解读 CornerToolGestureView.js CornerToolGestureView，是四个角落携带工具按钮的手势视图 基于HBMultiGestureView封装的，所以开发时真正用的是这个CornerToolGestureView HBMultiGestureView就类似一个三方库，不是面向具体业务的，俗话说就是，开发时直接用它去组装UI 不够简单，于是封装为更好用的组件CornerToolGestureView，用于各个地方。 就像是react-native-fast-image，我们并不在开发功能时直接用它，往往会对这个三方组件封装一层(e.g.增加了设置error占位图能力)，再去用于各个地方，比如 我们封装的图片base组件 ","date":"2023-11-01","objectID":"/zyestin/multi-gestture-sticker/:2:3","tags":["best-practice","react-native"],"title":"RN 动画 - 缩放、旋转、拖拽","uri":"/zyestin/multi-gestture-sticker/"},{"categories":["react-native"],"content":"Jenkins for iOS（第二次搭建记录） ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:0:0","tags":["tool","react-native","ios"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":["react-native"],"content":"运行环境搭建（简略版） 下载 jenkins.war jdk8 运行jenkins 首次设置账户信息（备忘） 账户: admin 密码: admin ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:1:0","tags":["tool","react-native","ios"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":["react-native"],"content":"建Job \u0026 配置 建第一个Job 设置Git 添加git 地址 添加ssh凭据【注意】 账号：生成ssh时的邮箱(~/.ssh/id_rsa.pub 最末尾可见） 密码：ssh秘钥（取于 ~/.ssh/id_rsa） 配置 脚本 #!/bin/bash -il echo 'Hi, start building ...' pwd whoami export LANG=en_US.UTF-8 export LANGUAGE=en_US.UTF-8 export LC_ALL=en_US.UTF-8 #工程环境路径 workspace_path=. #项目名称 project_name=myApp #ipa 所存放的文件夹 ipaPath=\"ipa\" echo \"第一步，更新库文件\" yarn cd ios /usr/local/bin/pod install --verbose --no-repo-update echo \"第二步，清除缓存文件....................\" xcodebuild clean rm -rf archive rm -f $ipaPath/$project_name.ipa echo \"第三步，设置打包环境，准备开始打ipa包....................\" #sed -i '' 's/\\app-store\\\u003c\\/string\\\u003e/\\ad-hoc\\\u003c\\/string\\\u003e/' archieveOpt.plist #sed -i '' 's/ProvisioningStyle = Automatic;/ProvisioningStyle = Manual;/' $project_name.xcodeproj/project.pbxproj echo \"第四步，执行编译生成.app命令\" #解决main.jsbundle找不到的问题 yarn build:ios xcodebuild archive -workspace $project_name.xcworkspace -scheme $project_name -configuration Release -archivePath archive/$project_name.xcarchive #CODE_SIGN_IDENTITY=\"iPhone Distribution: Beijing Maihuo Technology Co., Ltd. (HFNWKQ65UU)\" PROVISIONING_PROFILE_SPECIFIER=\"093cc99a-e0ce-47fb-a14d-ba1a0f5a290d.mobileprovision\" echo \"第五步，执行编译生成.ipa命令\" xcodebuild -exportArchive -exportOptionsPlist archieveOpt.plist -archivePath archive/$project_name.xcarchive -exportPath $ipaPath -configuration Release #改名 “我的应用.ipa” 为 \"myApp.ipa\" mv ${ipaPath}/*.ipa ${ipaPath}/${project_name}.ipa echo \"第六步，上传ipa到蒲公英\" curl -F \"file=@${ipaPath}/${project_name}.ipa\" -F \"uKey=get_uKey_from_pgyer\" -F \"_api_key=get_api_key_from_pgyer\" https://www.pgyer.com/apiv1/app/upload 其中，脚本的最后部分是 上传蒲公英。参照蒲公英官网教程获取 get_uKey_from_pgyer，get_api_key_from_pgyer 去吧。 到这里就可以结束了。当然，如果定制更多功能，优化流程，可以继续看下去。 配置 钉钉通知 参考: Jenkins配置钉钉通知 按照👆钉钉群里机器人的设置，挨个配置到jenkins的钉钉通知插件里👇 然后，对某个Job添加 钉钉通知👇 配置 build前选择tag 安装 Git Parameter插件 然后往Job里设置 最后，可以愉快的使用了，简单傻瓜式点击，即可实现 拉取对应tag代码、打包、上传到蒲公英，并且通知到钉钉群了。 ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:2:0","tags":["tool","react-native","ios"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":["react-native"],"content":"错误记录 Q：两个Job首次在jenkins执行build，均出现 打包失败 diff: /Podfile.lock: No such file or directory diff: /Manifest.lock: No such file or directory error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation. ** ARCHIVE FAILED ** R: 通过ios/Pods/ 可以发现，三方库不全。往往需要多试几次，才能集成完。 A: 第二次执行build，就ok了 Q：上传蒲公英失败 curl: (26) Failed to open/read local data from file/application Action: 去 /用户/yestin/.jenkins/workspace目录下，发现ios/下的ipa文件名是 我的应用.ipa，并不是myApp.ipa，莫非是这个影响？ 果然就是。因为xcodebuild -exportArchive不支持直接对ipa包命名，可能要结合Xcode某个设置。 A: 先找简单方法解决吧👇，命令 更改文件名 #改名 “我的应用.ipa” 为 \"myApp.ipa\" mv ${ipaPath}/*.ipa ${ipaPath}/${project_name}.ipa echo \"第六步，上传ipa到蒲公英\" curl -F \"file=@${ipaPath}/${project_name}.ipa\" -F \"uKey=e2ff6a115f6763483e2559741d20e06f\" -F \"_api_key=3352a89fc193379c982ae1ad51444103\" https://www.pgyer.com/apiv1/app/upload ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:3:0","tags":["tool","react-native","ios"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":["react-native"],"content":"其它 这哥们 提供了较详细的脚本，要做的更复杂可以参考下~ ","date":"2023-11-01","objectID":"/zyestin/tool-rn-jenkins-ios/:4:0","tags":["tool","react-native","ios"],"title":"从0到1用Jenkins实现对RN项目一键打包、发布","uri":"/zyestin/tool-rn-jenkins-ios/"},{"categories":["code"],"content":"讨论背景 相信大家写代码时 对自己都有一些要求，比如下面的 基本期望：写出他人能容易看懂的代码 更高追求：写出他人看起来很爽的代码 每经历一个阶段，大家都对编码有不同程度的进步提升，可以分享；同时也会积累一些场景下代码如屎的烦恼，想要破局。 于是，阶段性的，需要一个机会，大家开个交流会进行讨论 （对于每个个体）互通有无，集思广益，团队每人都有所提升 （对于互相之间协作）更多地了解到彼此 阅读代码、写代码的风格习惯，增进理解 （对于工作）对现阶段遇到的痛点，找出更优解，或制定调研计划 每次讨论，规范条款上的收获，不在于多少，至少会收获了一些代码细节上的技巧或认知，最重要的是 大大增进了互相的了解，协作起来将越来越紧密顺畅。 讨论成果 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:0:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"组件代码结构 关键点: 打开文件后，更方便的看到核心代码（那就尽量靠前咯） 也就是 render/return组件 之前的代码量尽可能少；那么，就需要通过函数提炼、划分职责等方式转移到别处。 组件代码 书写顺序 示例如下 // AAView.js import { xxCalculate, xxUploadEvent } from 'app/components/XxModule' import AView from './components/AView' import BView from './components/BView' //$$ 用于组件函数内的变量 紧邻写在组件函数上方 const variableUsedInXXComp = ... //组件函数 const AAView = props =\u003e { //$$ props解构, 放第一行 ///reason：即使AAView上面不写@param注释，通过这里的解构也能看出props的参数 const { paramA, paramB } = props //$$ 副作用函数(即use开头的函数)，写在顶层作用域， const [aEverClicked, setAEverClicked] = useState(false) const [bClickedTime, setBClickedTime] = useState(0) ... //$$ 归类逻辑代码到hooks，e.g. 数据处理（获取数据、更新数据）聚合到一个hooks， 滑动相关监听处理 聚合到另一个hooks const {loading, data, error, addData, updateData} = useLoadData({id: paramA}) ... //$$ 业务逻辑处理。 注意：如果这部分代码较多，一般是可以转移几个api，挪到 某单一职责的hooks里去 const onPressAView = () =\u003e { //如果复杂逻辑(多行 e.g. 15行)，抽取纯函数， 与XXComp并列 放其后面 addData( calculateAndCreateItemData(inputX, bClickedTime) ) setAEverClicked(true) xxUploadEvent() } const onPressBView = () =\u003e { //简单逻辑(e.g. \u003c10行)，直接写在这里 updateData({ count: bClickedTime, key: variableUsedInXXComp }) ... setBClickedTime(bClickedTime+1) } ... ... //$$ render return ( \u003cView style={styles.container}\u003e \u003cAView onPress={onPressAView}\u003e {aEverClicked ? \u003cView\u003e ... \u003c/View\u003e : null } ... \u003c/AView\u003e \u003cBView param={inputY} onPress={onPressBView}\u003e ... \u003c/BView\u003e ... { data?.map(item =\u003e (\u003cView style={styles.content}}\u003e \u003cText style={styles.title}\u003e{styles.title}\u003c/Text\u003e \u003cImage style={styles.cover} source={data[0].cover} /\u003e \u003c/View\u003e)) } \u003c/View\u003e ) } //$$ hooks 数据获取相关逻辑：请求、loading状态、错误、数据处理(response data -\u003e UI data) const useLoadData = ({id}) =\u003e { const [data, setData] = useState(null) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) useEffect(()=\u003e{ request({id}).then(res=\u003e{ setData(res.data) }); }, []) //请求 return { data, loading, error ... } } //$$ 仅用于组件内部的函数 紧邻写在组件函数下方 const calculateAndCreateItemData = (a, b) =\u003e { let result = {} //复杂逻辑 ... ... result.count = xxCalculate(a, ...) return result } // 方法提炼到这里 reason： // 1.提炼纯函数，略利于性能 // 2.移到这里，减少对核心代码的干扰 //$$ 仅用于样式的变量 紧邻写在styles声明的上方 const listWidth = px2dp(100) const styles = StyleSheet.create({ container: { //约束自身 flex: 1, backgroundColor: '#eee', marginTop: px2dp(20), //约束子视图的 paddingHorizontal: px2dp(15), flexDirection: \"row\", alignItems: \"center\", justifyContent: \"space-between\", }, list: { marginHorizontal: 10, width: listWidth, ... }, ... }) ","date":"2023-11-01","objectID":"/zyestin/code-standards/:1:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"较复杂模块拆分后的目录结构 目录 体现着模块划分思维 取项目里的一个典型示例 \u003e tree ./app/screens/graphic/tabs/userHome/ ./app/screens/graphic/tabs/userHome/ ├── components │ ├── Header │ │ ├── BackgroundImage.js │ │ ├── MoreButton.js │ │ ├── OpaqueNavBar.js │ │ ├── index.js │ │ └── useHeader.js │ ├── LoadingView.js │ ├── Tabbar.js │ ├── TabsStickScrollView.js │ └── list │ ├── HistoryWorkList.js │ ├── LikedWorkList.js │ ├── MineWorkList.js │ ├── UserWorkList.js │ └── item │ ├── UnpublishedEntryItem.js │ ├── UnpublishedType.js │ └── index.js ├── index.js ├── otherScreens │ ├── DraftScreen.js │ └── RejectScreen.js └── utils └── DraftDataManager.js 合理拆分模块，避免单文件代码行数过多，统一命名风格，将大大减少理解阻碍 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:2:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"通知命名 以后会出这样一个 通知名 集中存放的文件 //NotificationCenter.js export { listen, emit, } // 参考 iOS通知命名，UIKeyboardWillChangeFrameNotification， // 命名表达出 who did (/will do) what，（即将）谁做了什么 //画本（某作品）点赞状态改变 export const kGraphicLikeStatusChangeNotification = 'kGraphicLikeStatusChangeNotification'; /* 使用示例 import { emit, kGraphicLikeStatusChangeNotification } from 'app/.../NotificationCenter'; emit(kGraphicLikeStatusChangeNotification, { graphicId: 123, likeStatus: 1 }); import { listen, kGraphicLikeStatusChangeNotification } from 'app/.../NotificationCenter'; const listener = listen(kGraphicLikeStatusChangeNotification, (data) =\u003e { ... } listener.remove(); */ ","date":"2023-11-01","objectID":"/zyestin/code-standards/:3:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"单个函数的总行数 限制多大合适？ 《阿里巴巴 Java 开发手册 v1.4.0（详尽版）》 ：80 行 https://edu.aliyun.com/article/103 若结合到咱公司自己项目， \u003c\u003e 与 \u003c/\u003e、{ 与 } 等标签的开始、结束（作用域）内尽量不超过 80 行 示例中的组件函数AAView比较特殊，其本身可能超 100 行，甚至更多 也没问题。因为其内部包含多个子函数、子组件；AAView内部的子函数、子组件\u003cView\u003e\u003c/View\u003e等可以参考 80 行限制 《代码不朽》：15 行 https://www.zhihu.com/question/280041384/answer/468623926 为什么编程应遵循 “30” 规则 https://www.infoq.cn/article/uu6zgvebe9w1ab1yqilb 《代码大全》Steve McConnell 指出，理论上，一个方法或函数的最佳最大限制是在一个屏幕上可以容纳的行数。 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:4:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"单个文件代码行数 限制多大合适？ 核心点 维护成本：长而冗长的代码通常更难以理解、调试和维护。通过设置代码行数限制，可以鼓励开发者编写更简洁、模块化的代码，从而减少维护成本。 ChatGPT 的看法 掘金文章 看法 https://juejin.cn/s/一个文件代码行数不超过多少 300~500 https://juejin.cn/s/一个文件代码行数不超过多少行%20华为 200 其它看法 【生理上】人的记忆只有三屏，80 行预计在两屏至两屏半之间。 【原则上】主干逻辑清晰，简洁易读 【要纯】初期代码多烂其实问题都不大的, 只要你函数全都是纯的, 以后化简还是拆起来都不是问题. 按照《重构》去做了，就不会出现单文件代码行数多的问题了 《好代码，坏代码》 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:5:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"单行代码 字符串宽度/数量限制 上面提到的文件代码行数、函数代码行数在各大公司标准中 基本没有指明，但代码列数限制到是不少标准里 提到。 谷歌的Google JavaScript Style Guide 80 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:6:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"其它 ","date":"2023-11-01","objectID":"/zyestin/code-standards/:7:0","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"市面上 大而全的 JavaScript 规范 Airbnb JavaScript Style Guide Google JavaScript Style Guide Standard JavaScript ","date":"2023-11-01","objectID":"/zyestin/code-standards/:7:1","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["code"],"content":"代码规范的常用工具 eslint prettier ","date":"2023-11-01","objectID":"/zyestin/code-standards/:7:2","tags":["learn","standard","code"],"title":"代码规范","uri":"/zyestin/code-standards/"},{"categories":["react"],"content":"《React Hooks 核心原理与实战》学习 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:0:0","tags":["learn","react"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":["react"],"content":"hooks Q: 为什么 Facebook 要发明React Hooks？React Hooks 解决了什么问题？ A: 简化了逻辑重用 hooks之前，复用逻辑要用到高阶组件或者render props 组件每次渲染，内部的函数会重新创建，导致 接收传递函数的子组件 也重新渲染 useCallback 对组件间传递的 (回调)函数 尽量都包裹 useMemo 缓存计算 useCallback，useMemo 只是为了避免 React 组件的重复渲染而导致的性能损失。 而对于原生的节点，比如 div, input 这些，它们已经是原子节点了，不再有子节点， 所以不存在重复刷新带来的性能损失。 useEffect执行时机是 DOM渲染后 useEffect中用到的变量，需要作为依赖参数 拆分复杂组件：不同逻辑拆到不同的Hooks里 Context 适用场景：仅 主题色、语言切换 redux 数据共享 避免不必要的请求 state 使用注意 state 避免定义多余的，找唯一数据源头 去发起改变 上次同事libin提到过这个场景：A传参value1给B，B又传value1给C，C里面能触发改变value1 方案1：C中的操作触发value1变更时，C不维护value1 state，由C回调给B再回调给A，由A改变value1，从而重新渲染B、C 方案2：C中的操作触发value1变更时，C改变C内部的value1，同时回调给B、A去更新(C外部)对应的value1 根据这篇来看，更倾向于方案1 。避免在子组件定义多余的state(value1)，找唯一数据源头A 去发起改变 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:1:0","tags":["learn","react"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":["react"],"content":"设计模式 所谓「设计模式」，就是针对特定场景，提供一种公认的最佳实践 保证状态的唯一数据源 语义化的拆分复杂组件 Hooks 的一个重要规则，即：Hooks 必须在顶层作用域调用 而不能放在条件判断、循环等语句中，同时也不能在可能的 return 语句之后执行。换句话说，Hooks 必须按顺序被执行到。 容器模式，把条件判断的结果放到两个组件之中。可用Hooks替代 function CounterRenderProps({ children }) { ... return children({ count, increment, decrement }); } render props 模式，重用 UI 逻辑 function ListWithMore({ renderItem, data = [], max }) ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:2:0","tags":["learn","react"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":["react"],"content":"拆包/分包：提高首屏页面的打开速度 function ProfilePage() { // 定义一个 state 用于存放需要加载的组件 const [RealPage, setRealPage] = useState(null); // 根据路径动态加载真正的组件实现 import('./RealProfilePage').then((comp) =\u003e { setRealPage(Comp); }); // 如果组件未加载则显示 Loading 状态 if (!RealPage) return 'Loading....'; // 组件加载成功后则将其渲染到界面 return \u003cRealPage /\u003e } import() 这个语句完全是由 Webpack 进行处理的 Webpack 会将以“./RealProfilePage”模块为起点的所有依赖模块，单独打成一个包。 并且，Webpack 还会生成代码，用于按需加载这个模块。 react-lodable，实现组件的异步加载 通过高阶组件来实现的，这个高阶组件实现了模块加载、loading 状态以及错误处理的功能。 import Loadable from \"react-loadable\"; // 创建一个显示加载状态的组件 function Loading({ error }) { return error ? 'Failed' : 'Loading'; } // 创建加载器组件 const HelloLazyLoad = Loadable({ loader: () =\u003e import(\"./RealHelloLazyLoad\"), loading: Loading, }); service worker 缓存前端资源：提高第二次以及后续打开 App 的速度 可以把 Service Worker 看作一种前端的资源请求代理。Service Worker 会拦截所有浏览器发送出来的请求，你可以通过代码去控制Rest API 这些请求发送到服务器；而 JS、CSS 等静态资源，则通过 Cache Storage 存储 在浏览器端。 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:3:0","tags":["learn","react"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":["react"],"content":"Webpack 为主流的前端应用打包工具，它的核心思路是将源代码以及图片、样式文件等资源文件都视为模块，然后通过提供对不同类型资源的处理器，将它们进行统一处理，形成最终可在浏览器运行的代码。 输入输出配置：定义你的应用程序的入口，以及打包结果输出的文件夹位置。 配置对于每一类资源文件的处理器：比如说，对 JavaScript 是用 babel-loader 去编 译；对 less 文件则是用 less-loader 去编译；图片则用 file-loader 去处理。你在项目 中能使用哪些技术或者资源，完全取决于配置了哪些 loader。 插件配置：除了核心的源代码编译和打包流程，Webpack 还支持插件扩展功能，可以 通过插件生成额外的打包结果，或者进行一些其它的处理。比如打包过程生成 index.html，源代码分析报表，提取 CSS 到独立文件，代码压缩，等等。 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: { // 定义ath.resolve(__dirname, './src/app.js'), }, output: { // 打包输出的文件名，这里将生成 main.bundle.js filename: '[name].bundle.js', // 定义打包结果的输出位置 path: path.resolve(__dirname, 'build'), }, module: { // 定义处理源文件的规则，rules 下会按顺序使用匹配的规则 rules: [ { // 遇到 .js 结尾的文件则使用这个规则 test: /\\.js$/, // 忽略 node_modules 目录下的 js 文件 exclude: /node_modules/, use: { // 使用 babel-loader 处理 js loader: 'babel-loader', // babel-loader 的一些选项 options: { presets: ['@babel/preset-env'], }, }, }, ], }, plugins: [ // 使用 HtmlWebpackPlugin 生成一个 index.html，其中自动引入 js // 并配置了页面的 title new HtmlWebpackPlugin({ title: 'Webpack Output', }), ], }; 针对这段配置代码，我们一般会把它存储为 webpack.config.js 这样一个文件，这样在我 们的项目下运行 webpack 命令，就会使用这个文件作为配置。 代码中其实已经很直观了，我们不仅定义了输入输出，还配置了 babel-loader，用于编译 JavaScript 文件到兼容主流浏览器的代码。同时，还为 babel-loader 设置了参数 Less 允许我们通过更强大的机制去写 Css，比如可以定义变量，允许嵌套的规则定义，等等。 要让一个 Less 文件最终打包到目标文件中，并被浏览器运行，那么首先需要把 Less 代码转换成 Css，再通过 style 标记插入到浏览器中。 这个过程涉及到三个 loader，如下： less-loader：用于将 Less 代码转换成 Css。 css-loader：用于处理 Css 中的 import、url 等语句，以便能分析出图片等静态资源打 包到最终结果。 style-loader：会自动生成代码，并将打包后的 Css 插入到页面 style 标签。这个 loader 会将 Css 打包到 js 文件中，在应用运行时，自动生成的代码再把这些 css 应用 到页面上。 module.exports = { // ... module: { rules: [ // ... { // 检测 less 文件 test: /\\.less$/, // 使用了三个 loader，注意执行顺序是数组的倒序 // 也就是先执行 less-loader use: ['style-loader', 'css-loader', 'less-loader'], }, ], }, //... }; 如果项目要支持 sass 作为 Css 预处理器，那么顺序就是 sass-loader -\u003e css- loader -\u003e style-loader。可以看到，我们只要替换 less-loader 为 sass-loader，后两个 loader 是完全一样的。 常见QA 为什么 CSS 代码会进入到 JavaScript 文件中呢？最终它是怎么应用到页面的呢？ 其实背后的过程主要是，生成的 CSS 代码会以字符串的形式作为一个模块打包 到最终结果，然后在运行时由 style-loader 提供的一个函数 injectStylesIntoStyleTag ， 来将这个模块加入到页面的 style 标签中，从而最终生效。 如果我们想让生成的 CSS 文件和 JavaScript 文件分开，应该如何做呢？ 从 rules 中去掉 style-loader 这个配置，以避免 CSS 进入到 JavaScript 文件中。 实现提取 CSS 模块到单独 CSS 文件的 plugin 是 mini-css-extract-plugin plugin 和 loader 的区别 loader主要用于处理不同类型的资源，将它们转换成模块； plugin 通常用于生成一些除了JavaScript bundle 之外的一些打包结果，比如例子中的 index.html 和 css 文件 React Native中用到 babel的例子 Webpack 动态加载模块 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:4:0","tags":["learn","react"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":["react"],"content":"感谢 感谢公司购买了这个课程《React Hooks 核心原理与实战》 感谢《React Hooks 核心原理与实战》作者分享这些经验 ","date":"2023-11-01","objectID":"/zyestin/course-react-hooks/:5:0","tags":["learn","react"],"title":"学习《React Hooks 核心原理与实战》笔记","uri":"/zyestin/course-react-hooks/"},{"categories":["react-native"],"content":"Q: 代码调用一个弹窗的极简方式是怎样的？ A: 这样子👉🏻 XxModuleAlert.show({..}) 为了这个极简用法的目标，我曾经 使用rn-global-modal封装过TextInputAlert，但依然有些问题或难用点，比如遮挡了Toast、更改mask颜色要改源码、布局上有些非正常的地方 因为不希望弹窗遮挡Toast，于是研究了react-native-root-toast，用的react-native-root-siblings，从而找到了封装理想弹窗的更快的方式 于是，基于react-native-root-siblings 5.0.1，造了一个 AlertManager Why need AlertManager 相信大家使用过RN官方Modal的，都知道，iOS弹窗无法弹两个，使用起来不满足高内聚低耦合，难受。。。 ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:0","tags":["best-practice","react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":["react-native"],"content":"RN官方Modal 缺点：耦合过多！须visible属性，多1个import useState，多1行代码setVisble声明，弹窗组件须嵌入容器组件 ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:1","tags":["best-practice","react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":["react-native"],"content":"rn-global-modal 优点：函数式调起弹窗，任意处可调用 缺点：iOS 不支持同时多层弹窗；toast的层级低于它 导致看不到/看不清 What AlertManager provide 封装者：封装出高度解耦的弹窗。 使用方：使用极简！ ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:2","tags":["best-practice","react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":["react-native"],"content":"优势 vs Modal：去掉visible vs rn-global-modal: 支持多层弹窗, TextInput弹窗对键盘支持更好？？ How to use AlertManager 使用方： XxModuleAlert.show({...}); XxModuleAlert.hide(); 封装方: class XxModuleAlert { static show() { AlertManager.show(\u003cXxModuleView /\u003e, { key: XxModuleView.name, }); } static hide() { AlertManager.hide(XxModuleView.name); } } export XxModuleAlert const XxModuleView = () =\u003e { ... return (...) } 源码 import React from \"react\"; import { Dimensions, TouchableOpacity, View } from \"react-native\"; import RootSiblingsManager from \"react-native-root-siblings\"; const { width, height } = Dimensions.get(\"window\"); /** * 弹窗管理类 * - 支持同时弹出多个弹窗 （Modal、rn-global-modal 不支持） * - 不会遮挡Toast（Modal、rn-global-modal 会遮挡Toast） */ class AlertManger { static _alertNodes = {}; // { key1: { rootNode: \u003cA/\u003e, onClose: () =\u003e {} }, key2: { rootNode: \u003cB/\u003e, onClose: () =\u003e {} } /** * 展示弹窗 * @param {*} modalView 弹窗内所要展示的内容组件 * @param {*} options.key **必传** 弹窗唯一标识 * @param {*} options.maskStyle 蒙层样式 默认值：{ backgroundColor: 'rgba(0, 0, 0, 0.5)' } * @param {*} options.maskTouchClosable 弹窗蒙层是否可点击关闭 * @param {*} options.closedCallback 弹窗关闭的回调 * @param {*} options.animationType [todo] 弹窗动画类型: none | fade | slide-up */ static show(modalView, options) { const { key, maskTouchClosable, closedCallback, maskStyle } = options; let rootNode; const onClose = () =\u003e { rootNode?.destroy(); rootNode = null; closedCallback?.(); }; rootNode = new RootSiblingsManager( ( \u003cView style={[ { position: \"absolute\", width: width, height: height, justifyContent: \"center\", alignItems: \"center\", backgroundColor: \"rgba(0,0,0,0.5)\", }, maskStyle, ]} \u003e \u003cTouchableOpacity style={{ position: \"absolute\", width: width, height: height, }} activeOpacity={1} onPress={(e) =\u003e { maskTouchClosable \u0026\u0026 this.hide(key); }} /\u003e {modalView} \u003c/View\u003e ) ); this._alertNodes[key] = { rootNode, onClose }; console.log(\"this._alertNodes:::\", this._alertNodes); } static hide(key) { console.log( \"this._alertNodes?.[key]?.onClose::\", this._alertNodes?.[key]?.onClose ); this._alertNodes?.[key]?.onClose?.(); delete this._alertNodes[key]; } } export default AlertManger; /* ----------------------- Usage ---------------------- */ /* * 弹窗开发者 这样封装自己的弹窗 ``` import AlertManager from \"app/components/dialog/AlertManager.js\"; class BbModuleAlert { static show() { AlertManager.show(\u003cBModuleView /\u003e, { key: BModuleView.name, maskTouchClosable: true, closedCallback: () =\u003e { console.log(\"BModuleView closedCallback\"); }, }); } static hide() { AlertManager.hide(BModuleView.name); } } export default BbModuleAlert; const BModuleView = () =\u003e { return ( ... ) } ``` */ /* * 弹窗调用者 这样调用弹窗 ``` import BbModuleAlert from \"./BbModuleAlert\"; BbModuleAlert.show(); BbModuleAlert.hide(); ``` */ ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:0:3","tags":["best-practice","react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":["react-native"],"content":"todo 如何提供 页面级别的弹窗 showInComp(comp) 需求： 某个弹窗，是当前A页面的子视图，若点击该弹窗种的按钮，跳转到下一个B页面时，该弹窗继续展示在A页面，B页面在最上层展示(是盖住该弹窗的) 像 取消\u0026确认 弹窗，可以基于这个重做一遍了 ","date":"2023-11-01","objectID":"/zyestin/alert-multiple/:1:0","tags":["best-practice","react-native"],"title":"实现 差不多理想的极简RN弹窗","uri":"/zyestin/alert-multiple/"},{"categories":["react-native"],"content":"效果展示/UI 切换输入法，避开键盘 输入/粘帖时，文字换行，输入框高度准确变化 ","date":"2023-11-01","objectID":"/zyestin/textinput-alert/:1:0","tags":["best-practice","react-native"],"title":"封装 低耦合、易用的文本输入框弹窗","uri":"/zyestin/textinput-alert/"},{"categories":["react-native"],"content":"使用/Usage 封装后，如下这样使用，解耦的干干净净 import TextInputAlert from \"./TextInputAlert\"; TextInputAlert.show({ text: \"hello\", // maxLength: 20, onChange: function didInputChange(text_) { console.log(\"didInputChange::\u003e\u003e\", text_); }, onCompleted: () =\u003e { console.log(\"onCompleted::\u003e\u003e\", content); }, }); TextInputAlert.hide(); 像原生一样调api方式展示弹窗，不需要Modal那样耦合过多（视图嵌入、visible字段控制…） ","date":"2023-11-01","objectID":"/zyestin/textinput-alert/:2:0","tags":["best-practice","react-native"],"title":"封装 低耦合、易用的文本输入框弹窗","uri":"/zyestin/textinput-alert/"},{"categories":["react-native"],"content":"源码/Code TextInputAlert ","date":"2023-11-01","objectID":"/zyestin/textinput-alert/:3:0","tags":["best-practice","react-native"],"title":"封装 低耦合、易用的文本输入框弹窗","uri":"/zyestin/textinput-alert/"},{"categories":["react-native"],"content":"目录 瀑布流列表base组件 图片base组件 状态栏导航栏组件 页面左上角的返回按钮组件 瀑布流列表base组件 源码：BaseList.js 优点：将下拉刷新、上拉加载更多相关的 pageNo逻辑，封装到BaseList中，使用方仅需关注 数据请求的api，让使用方代码量降到最少。 ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:0","tags":["react-native","component"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":["react-native"],"content":"使用示例 平替 FlatList import BaseList from \"app/components/list/base\"; import { getFanList } from \"./service\"; const pageSize = 10; const FanList = (props) =\u003e { const { userId } = props; const _requestFunc = (page, pageSize) =\u003e { return getFanList({ userId: userId, pageNo: page, pageSize }); }; const _renderItem = ({ item, index }) =\u003e { return \u003cItem {...item} /\u003e; }; return ( // \u003cView style={{ flex: 1 }}\u003e \u003cBaseList requestFunc={(page) =\u003e _requestFunc(page, pageSize)} contentContainerStyle={{ paddingVertical: px2dp(5), paddingLeft: px2dp(5), }} renderItem={_renderItem} // numColumns={1} uniqueKey={\"userId\"} /\u003e // \u003c/View\u003e ); }; 可能会有双列分布不均问题，即某一列大量空白现象 最完美（渲染均匀、性能最佳）用法 import { StyleSheet, Text, View } from \"react-native\"; import React, { forwardRef, useCallback, useEffect } from \"react\"; import ImageTextFeed, { sizeForItem as imageTextFeedSizeForItem, } from \"./Feed/ImageTextFeed\"; import TextFeed, { sizeForItem as textFeedSizeForItem } from \"./Feed/TextFeed\"; import { px2dp } from \"app/utils/ScreenUtils\"; import BaseList from \"app/components/list/base\"; import SA from \"app/utils/SaUtil\"; const FeedList = forwardRef((props, ref) =\u003e { const { requestFunc, ListHeaderComponent, disableAutoLoadNew, ListEmptyComponent, } = props; useEffect(() =\u003e { console.log(\"useEffect:FeedList\"); }, []); const _renderItem = ({ item, index }) =\u003e { if (item.previewUri) { return \u003cImageTextFeed item={item} /\u003e; } else { return \u003cTextFeed item={item} /\u003e; } }; return ( \u003cBaseList ref={ref} requestFunc={(page) =\u003e requestFunc(page)} contentContainerStyle={{ paddingVertical: px2dp(0), paddingLeft: px2dp(12), }} renderItem={_renderItem} numColumns={2} uniqueKey={\"id\"} getItemType={(item) =\u003e { return item.previewUri ? \"ImageText\" : \"Text\"; }} headRefreshEnable={true} ListHeaderComponent={ListHeaderComponent} disableAutoLoadNew={disableAutoLoadNew} ListEmptyComponent={ListEmptyComponent} sizeForItem={(item, index) =\u003e { return item.previewUri ? imageTextFeedSizeForItem(item) : textFeedSizeForItem(item); }} /\u003e ); }); export default FeedList; 图片base组件 源码：BaseImage.js 优点： 使用了高性能图片库FastImage，封装为 可配置图片加载失败后展示的占位error图 ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:1","tags":["react-native","component"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":["react-native"],"content":"使用示例 // aliyun oss image format // error image url: https://cdn.xxx.com/pic/illustrationstory/default/default_cover_720-1080.png?x-oss-process=image/resize,w_150/quality,q_85/format,webp // normal image url: https://cdn.xxx.com/pic/illustrationstory/custom/scene/202310/2721/1698415166233-0yZkuCBu9I_960-960.png?x-oss-process=image/resize,w_150/quality,q_85/format,webp import HBImage from \"app/components/image/HBImage\"; import { getSize, parseSize } from \"app/utils/image/measurer\"; const FeedItem = (props) =\u003e { const coverUrl = useMemo( () =\u003e getImageUrl(item.coverUrl, imageWidth), //oss resize 拼接url [item.coverUrl] ); const imageHeightFromUrl = useMemo(() =\u003e { return getHeightFromSize(parseSize(coverUrl)); // parseSize 从url(..._720-1080.png...)中解析出宽高 【正常100%都能取出】 }, [coverUrl]); const [imageHeight, setImageHeight] = useState(imageHeightFromUrl); useEffect(() =\u003e { if (!(imageHeightFromUrl \u003e 0)) { //若从url中未能解析出宽高，就通过RN官方Image.getSize方式获取宽高 【正常100%不可能走这里头】 let h = imageSize; getSize(coverUrl) .then((size) =\u003e { if (size) { h = getHeightFromSize(size); } setImageHeight(h); kImageHeightCache[coverUrl] = h; }) .catch((err) =\u003e { setImageHeight(h); }); } else { kImageHeightCache[coverUrl] = imageHeightFromUrl; } }, [coverUrl]) return \u003c\u003e {imageHeightFromUrl || imageHeight ? ( \u003cHBImage style={[ localStyles.image, { height: imageHeightFromUrl \u003e 0 ? imageHeightFromUrl : imageHeight, }, ]} source={{ uri: coverUrl }} resizeMode={\"contain\"} errorSource={require(\"app/components/image/default_cover_720-1080.png\")} /\u003e ) : null} \u003c/\u003e } const getHeightFromSize = (size) =\u003e { if (!(size?.width \u003e 0) || !(size?.height \u003e 0)) return 0; return Math.min((imageSize * size.height) / size.width, maxImageHeight); }; 状态栏导航栏组件 源码：BaseNavBar.js 优点： 带 返回按钮，点击返回上一页 带 title 支持自定义导航栏内子视图 使用时无需考虑状态栏适配了（内部处理了） ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:2","tags":["react-native","component"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":["react-native"],"content":"使用示例 最常规用法 [ 返回键 + title ] 使用场景：几乎所有页面 import BaseNavBar from \"app/components/navBar/base\"; \u003cBaseNavBar title={\"书架筛选\"} /\u003e 自定义导航栏内容用法 使用场景：导航栏需要特别自定义时 import BaseNavBar from \"app/components/navBar/base\"; \u003cBaseNavBar\u003e {/* 搜索栏 */} \u003cView style={styles.inputContainer}\u003e \u003cTextInput style={styles.textInput} placeholder={placeholder || \"输入搜索关键字\"} placeholderTextColor={\"#999999\"} onChangeText={onChangeText} value={keyword} onSubmitEditing={_onClickSubmit} keyboardType=\"web-search\" returnKeyType=\"search\" autoFocus={true} /\u003e \u003cTouchableOpacity style={styles.closeButton} onPress={clearInput}\u003e \u003cImage style={styles.closeButtonImage} source={require(\"./images/close-gray.png\")} /\u003e \u003c/TouchableOpacity\u003e \u003c/View\u003e \u003cTouchableOpacity style={styles.searchButton} onPress={_onClickSubmit}\u003e \u003cText style={{ fontSize: px2dp(16), color: \"#666666\" }}\u003e搜索\u003c/Text\u003e \u003c/TouchableOpacity\u003e \u003c/BaseNavBar\u003e 页面左上角的返回按钮组件 源码：LeftUpBackButton.js 优点： 避开了状态栏 热区足够大 使用起来极简 使用场景：不需要导航栏 但需要返回按钮的页面，e.g. 一些全屏弹窗（图片查看器…） ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:3","tags":["react-native","component"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":["react-native"],"content":"使用示例 import LeftUpBackButton from \"app/components/LeftUpBackButton\"; \u003cLeftUpBackButton //iconType=\"white\" //onPress={() =\u003e { //dismiss alert //}} /\u003e ","date":"2023-11-01","objectID":"/zyestin/base-components/:0:4","tags":["react-native","component"],"title":"封装常用基础组件","uri":"/zyestin/base-components/"},{"categories":["react-native"],"content":"需求 当输入 以#开头的字符串，则判定为标签 并展示为蓝色 效果图 ","date":"2023-11-01","objectID":"/zyestin/douyin-label-input/:1:0","tags":["react-native"],"title":"模仿抖音、小红书 输入 #标签 高亮","uri":"/zyestin/douyin-label-input/"},{"categories":["react-native"],"content":"调研 iOS的TextField可以设定attributedString富文本，但RN的TextInput是不具备的。 方案： TextInput上浮一个style大小一致的Text，TextInput文字颜色设为透明，Text内嵌套 style为蓝色的Text 用来展示#任意(至少1个)字符 ","date":"2023-11-01","objectID":"/zyestin/douyin-label-input/:2:0","tags":["react-native"],"title":"模仿抖音、小红书 输入 #标签 高亮","uri":"/zyestin/douyin-label-input/"},{"categories":["react-native"],"content":"代码 import React, { useState } from \"react\"; import { View, TextInput, Text, StyleSheet } from \"react-native\"; const App = () =\u003e { const [text, setText] = useState(\"\"); const handleTextChange = (inputText) =\u003e { // 检测输入字符串中是否包含 \"#\" if (inputText.includes(\"#\")) { // 将包含 \"#任意(至少1个)字符\" 的部分替换为带有蓝色样式的文本组件 const parts = inputText.split(/(?=#|\\s)/g); console.log(\"parts: \", parts); const formattedText = parts.map((part, index) =\u003e { return part.includes(\"#\") \u0026\u0026 part.length \u003e= 1 ? ( \u003cText onPress={() =\u003e { console.log(\"click part:\", part); }} key={index} style={{ color: \"blue\" }} \u003e {part} \u003c/Text\u003e ) : ( part ); }); // 设置更新后的文本 setText(formattedText); } else { // 输入字符串不包含 \"#文字\"，直接设置文本 setText(inputText); } }; return ( \u003cView style={{ flex: 1, backgroundColor: \"pink\", marginTop: 100 }}\u003e \u003cTextInput style={[ styles.text, { borderWidth: 1, borderColor: \"gray\", width: \"100%\", padding: 0, color: \"white\", }, ]} onChangeText={handleTextChange} multiline={true} \u003e \u003cText\u003e{text}\u003c/Text\u003e \u003c/TextInput\u003e \u003cText style={{ color: \"yellow\" }}\u003e{text}\u003c/Text\u003e \u003c/View\u003e ); }; const styles = StyleSheet.create({ container: { backgroundColor: \"#fff\", borderWidth: 1, borderColor: \"gray\", padding: 10, marginTop: 20, }, text: { color: \"white\", fontSize: 16, lineHeight: 20, }, }); export default App; 代码核心逻辑： 输入文字变化后，将文字按照 #文本，分割为数组，结果如下日志所示。 然后对每个元素 判断是否含#，含有 则设定blue样式 日志： LOG parts: [\"好的\", \"#记得记\", \" 记得记得\", \"#记得记得\", \" \", \"#记得记得\", \" \"] ","date":"2023-11-01","objectID":"/zyestin/douyin-label-input/:3:0","tags":["react-native"],"title":"模仿抖音、小红书 输入 #标签 高亮","uri":"/zyestin/douyin-label-input/"},{"categories":["react-native"],"content":"需求 效果展示 ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-horizontal/:1:0","tags":["react-native"],"title":"横向 瀑布流列表","uri":"/zyestin/waterfall-list-horizontal/"},{"categories":["react-native"],"content":"源码 import { StyleSheet, Text, TouchableOpacity, View } from \"react-native\"; import React, { useEffect, useRef, useState } from \"react\"; import HBImage from \"../../../../components/image/HBImage\"; import { px2dp } from \"../../../../utils/ScreenUtils\"; import { MasonryFlashList } from \"@shopify/flash-list\"; import { bookOpenChoices } from \"app/service/MarkService\"; import * as indexUtil from \"app/utils/index\"; const itemWidth = px2dp(12 + 86.5 + 251.5); const itemHeight = px2dp(139); const itemSpace = px2dp(17); const UserChooseBook = (props) =\u003e { const { selectedSex, marks } = props; const [dataList, setDataList] = useState([]); const listViewRef = useRef(null); const { onScrollBeginDrag, onScroll } = useListViewAutoScrollAnimate({ listViewRef: listViewRef, framesPerSecond: 40, // 1000/40 = 25帧/秒 offsetPerFrame: 1, totalScrollDistance: (itemWidth * Math.max(0, Math.max(0, dataList?.length || 0) - 1)) / 2, disableAnimate: false, }); useEffect(() =\u003e { bookOpenChoices({ gender: selectedSex || \"girl\", ...(marks ? { marks: marks } : {}), }).then((res) =\u003e { setDataList(res.books); }); }, []); const renderItem = (props) =\u003e { console.log(\"renderItem props:\", props); return ( \u003cBookItem key={props.item?.bookId} {...props} onPress={() =\u003e { goNext(props.item.bookId); }} /\u003e ); }; const goNext = (bookId) =\u003e {}; return ( \u003cView style={styles.container}\u003e \u003cText style={styles.title}\u003e进站必读\u003c/Text\u003e \u003cView style={styles.scrollContainer}\u003e \u003cMasonryFlashList ref={listViewRef} estimatedItemSize={/* itemStyles.container.height */ 100} data={dataList} keyExtractor={(item, index) =\u003e item?.[\"bookId\"]} initialNumToRender={5} numColumns={2} renderItem={renderItem} showsVerticalScrollIndicator={false} onScrollBeginDrag={onScrollBeginDrag} onScroll={onScroll} /\u003e \u003c/View\u003e \u003cTouchableOpacity style={styles.button} onPress={() =\u003e goNext()}\u003e \u003cText style={styles.buttonTitle}\u003e{\"跳过\"}\u003c/Text\u003e \u003c/TouchableOpacity\u003e \u003c/View\u003e ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: \"center\", paddingLeft: itemSpace, }, title: { marginTop: px2dp(90), color: \"#101417\", fontWeight: \"bold\", fontSize: px2dp(17), lineHeight: px2dp(24), }, scrollContainer: { marginTop: px2dp(72), width: itemHeight * 2 + itemSpace * 2, //px2dp(139 * 2 + 17), height: px2dp(375), transform: [{ rotate: \"270deg\" }], }, }); export default UserChooseBook; // ----- ----- ----- ----- hooks ----- ----- ----- ----- const useListViewAutoScrollAnimate = ({ listViewRef, framesPerSecond, offsetPerFrame, totalScrollDistance, }) =\u003e { const scrollInterval = Math.floor(1000 / framesPerSecond); // 每次滚动之间的间隔，每秒动画的帧数 const scrollDistance = offsetPerFrame; // 控制每scrollInterval 滚动的距离 const [disabled, setDisabled] = useState(false); const scrollIntervalId = useRef(null); const currentScrollDistance = useRef(0); useEffect(() =\u003e { const stopAutoScroll = () =\u003e { clearInterval(scrollIntervalId.current); }; if (totalScrollDistance \u003e 10 \u0026\u0026 !disabled) { setTimeout(() =\u003e { startAutoScroll(); }, 100); } return () =\u003e { stopAutoScroll(); }; }, [totalScrollDistance, disabled]); const scroll = () =\u003e { const nextDistance = Math.min( totalScrollDistance, currentScrollDistance.current + scrollDistance ); listViewRef.current.scrollToOffset({ offset: nextDistance, animated: false, }); currentScrollDistance.current = nextDistance; if (currentScrollDistance.current \u003e= totalScrollDistance) { currentScrollDistance.current = 0; } }; const startAutoScroll = () =\u003e { scrollIntervalId.current = setInterval(scroll, scrollInterval); }; const onScrollBeginDrag = () =\u003e { setDisabled(true); }; const onScroll = (e) =\u003e { currentScrollDistance.current = e.nativeEvent.contentOffset.y; }; return { onScrollBeginDrag, onScroll, }; }; // ----- ----- ----- ----- component ----- ----- ----- ----- const BookItem = (props) =\u003e { const { item, index, onPress } = props; const { coverUrl, bookName: title } = item; const _coverUrl = indexUtil.getImageUrl( indexUtil.DOMAIN_PICAPP, coverUrl, indexUtil.IMG_BOOK_COVER_LIST ); return ( \u003cTouchableOpacity style={[item","date":"2023-11-01","objectID":"/zyestin/waterfall-list-horizontal/:2:0","tags":["react-native"],"title":"横向 瀑布流列表","uri":"/zyestin/waterfall-list-horizontal/"},{"categories":["react-native"],"content":"代码核心逻辑 MasonryFlashList 自动慢速滚动动画，借鉴 这一篇瀑布流列表 自动滚动动画，在这里运用时 封装在useListViewAutoScrollAnimate之中 把列表变成水平滑动的方式是，将列表旋转90度，将Item内容反转90度。 为何不使用类似ScrollView的horizontal属性，直接设成水平滚动不就好了？ 我也想，只不过MasonryFlashList官方明确表示，不支持呀~ 以下是列表垂直变水平的关键步骤 const itemWidth = px2dp(12 + 86.5 + 251.5); //大值 const itemHeight = px2dp(139); //小值 const itemSpace = px2dp(17); Item内容，按蓝湖图设置真实宽高 transformContainer: { width: itemWidth, //大 height: itemHeight //小 } Item 要被颠倒90度，展示在一个垂直列表里，所以transform这样设置 transform: [ { rotate: \"90deg\" }, { translateX: (itemWidth - itemHeight) / 2 }, { translateY: (itemWidth - itemHeight) / 2 }, ] 在这个垂直列表里，每个Item的壳容器 宽高是这样的 container: { height: itemWidth, //大 width: itemHeight, //小 } 把垂直的列表变成 水平列表，那么对列表反向旋转90度，即这样设 scrollContainer: { width: itemHeight * 2 + itemSpace * 2, //px2dp(139 * 2 + 17), height: px2dp(375), transform: [{ rotate: \"270deg\" }], }, ","date":"2023-11-01","objectID":"/zyestin/waterfall-list-horizontal/:2:1","tags":["react-native"],"title":"横向 瀑布流列表","uri":"/zyestin/waterfall-list-horizontal/"},{"categories":["react-native"],"content":"脚手架 create-react-native-module ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:0:0","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"脚手架使用（顺利） 工具安装 npm install -g yarn npm install -g create-react-native-module 脚手架命令 create-react-native-module RemoteFont --object-class-name react-native-remote-font --object-class-name RemoteFontLoader --native-package-id com.yestin.font --platforms ios,android --github-account zyestin --author-name yestin --author-email zyestin@gmail.com --generate-example --example-react-native-template react-native@0.62 过程中发现，若不指定--example-react-native-template react-native@0.62，发现总有这样的报错日志 pod --version failure, aborting with broken example app Error while creating library module react-native-remote-font Error: Command failed with ENOENT: pod --version spawnSync pod ENOENT at Object.spawnSync (internal/child_process.js:1077:20) at Object.spawnSync (child_process.js:776:24) at Function.module.exports.sync (/usr/local/lib/node_modules/create-react-native-module/node_modules/execa/index.js:174:25) at module.exports.commandSync (/usr/local/lib/node_modules/create-react-native-module/node_modules/execa/index.js:235:15) at /usr/local/lib/node_modules/create-react-native-module/lib/lib.js:265:17 at new Promise (\u003canonymous\u003e) at /usr/local/lib/node_modules/create-react-native-module/lib/lib.js:223:18 成功的日志 CREATE new React Native module with the following options: name: RemoteFont full package name: react-native-remote-font is view: false object class name: RemoteFontLoader Android nativePackageId: com.yestin.font platforms: ios,android Apple tvosEnabled: false authorName: yestin authorEmail: zyestin@gmail.com author githubAccount: zyestin license: MIT useAppleNetworking: false generateExample: true exampleFileLinkage: false exampleName: example exampleReactNativeTemplate: react-native@0.62 writeExamplePodfile: false CREATE: Check for valid Yarn CLI tool version, as needed to generate the example project 1.22.21 yarn --version ok CREATE: Generating the React Native library module CREATE example app with the following template: react-native@0.62 ###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere ✔ Downloading template ✔ Copying template ✔ Processing template ✔ Installing CocoaPods dependencies (this may take a few minutes) Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd \"/Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example\" \u0026\u0026 npx react-native run-android Run instructions for iOS: • cd \"/Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example\" \u0026\u0026 npx react-native run-ios - or - • Open example/ios/example.xcworkspace in Xcode or run \"xed -b ios\" • Hit the Run button Run instructions for macOS: • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions. Linking the new module library to the example app yarn add v1.22.21 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning \"@react-native-community/eslint-config \u003e @typescript-eslint/eslint-plugin@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/parser@1.13.0\" has incorrect peer dependency \"eslint@^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react@7.12.4\" has incorrect peer dependency \"eslint@^3.0.0 || ^4.0.0 || ^5.0.0\". warning \"@react-native-community/eslint-config \u003e eslint-plugin-react-native@3.6.0\" has incorrect peer dependency \"eslint@^3.17.0 || ^4 || ^5\". warning \"@react-native-community/eslint-config \u003e @typescript-eslint/eslint-plugin \u003e tsutils@3.21.0\" ha","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:1:0","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"运行iOS（较顺利） 如RN0.62老样子，App成功启动了， 但弹窗报错React Native: Unexpected token ':'. Expected a ')' 这样改metro-react-native-babel-preset from 0.58.0 to 0.59.0 然后yarn install \u0026\u0026 npx pod-install 后， 重新Xcode run iOS就OK了 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:2:0","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"将自定义三方库代码写入（有坑） ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:3:0","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"输入 本库代码 直接在顶层目录 改三方库代码就行 因为example内所使用的react-native-remote-font文件，是软链，指向到顶层目录的 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:3:1","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"添加 其它依赖库（挺坑） 直接在package.json里添加如上依赖后，yarn \u0026\u0026 npx pod-install后，Xcode run 报错如下，多次这样后，还是报错。。。 error: Error: Unable to resolve module react-native-fs from /Users/yestin/Desktop/code_test/react-native/react-native-remote-font/index.js: react-native-fs could not be found within the project or in these directories: /Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example/node_modules If you are sure the module exists, try these steps: 1. Clear watchman watches: watchman watch-del-all 2. Delete node_modules and run yarn install 3. Reset Metro's cache: yarn start --reset-cache 4. Remove the cache: rm -rf /tmp/metro-* 10 | } from \"react-native\"; 11 | import React, { useEffect, useMemo, useRef, useState } from \"react\"; \u003e 12 | import RNFS from \"react-native-fs\"; | ^ 按照上面的提示，执行 watchman watch-del-all rm -rf node_modules yarn \u0026\u0026 npx pod-install 也终于在 node_modules下 能看到了 react-native-fs 此时，居然还没有好，报错 Invariant Violation: Native module cannot be null 因Xcode 并没有link到这个库的iOS代码RNFS，Xcode里完全搜不到 于是 往example/ios/Podfile里手动添加link pod 'RNFS', :path =\u003e '../node_modules/react-native-fs' 再npx pod-install后 就好了 我把这个临时方案提供到了create-react-native-module/issues/489# ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:3:2","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"写Demo测试 从 Google Fonts 扒一些字体链接 const fontInfoList = [ { fontName: \"Ma Shan Zheng\", fontUrl: \"https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMHsCoRTJKKTqxFXqIji1hn3wSpSEA3eSpJy0awdsFt2Zfc6SSE.119.woff2\", }, { fontName: \"Afacad\", fontUrl: \"https://fonts.gstatic.com/s/afacad/v1/6NUI8FKMIQOGaw6ahLYEvBjUVG5Ga92uVSQ-9kKlZfNfuw.ttf\", }, { fontName: \"Rubik Bubbles\", fontUrl: \"https://fonts.gstatic.com/s/rubikbubbles/v3/JIA1UVdwbHFJtwA7Us1BPFbRNTENfDxyRXI.ttf\", }, { fontName: \"Preahvihear\", fontUrl: \"https://fonts.gstatic.com/s/preahvihear/v29/6NUS8F-dNQeEYhzj7uluxswE49FJf8Wv.ttf\", }, ]; 测试的核心代码 \u003cArtText text=\"Hello World\" style={{ fontSize: 20, fontVariant: [\"proportional-nums\"] }} fontInfo={fontInfoList[fontInfoIndex]} /\u003e 同样，将安卓代码放进去 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:4:0","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"运行 Android（挺坑） yarn android报错 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:5:0","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"(1) Failed to transform react-native-0.71.0-rc.0-debug.aar * What went wrong: Execution failed for task ':react-native-remote-font:javaPreCompileDebug'. \u003e Could not resolve all files for configuration ':react-native-remote-font:debugCompileClasspath'. \u003e Failed to transform react-native-0.71.0-rc.0-debug.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-classes, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-api}. \u003e Execution failed for JetifyTransform: /Users/yestin/.gradle/caches/modules-2/files-2.1/com.facebook.react/react-native/0.71.0-rc.0/7a7f5a0af6ebd8eb94f7e5f7495e9d9684b4f543/react-native-0.71.0-rc.0-debug.aar. \u003e Java heap space 查到是RN的原因了，照着这个回答 react-native/issues/35210#issuecomment-1304536693 在react-native-remote-font/example/android/build.gradle添加如下代码 def REACT_NATIVE_VERSION = new File(['node', '--print',\"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version\"].execute(null, rootDir).text.trim()) allprojects { configurations.all { resolutionStrategy { // Remove this override in 0.66, as a proper fix is included in react-native itself. force \"com.facebook.react:react-native:\" + REACT_NATIVE_VERSION } } 再次 yarn android App成功安装启动，但依然报错 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:5:1","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"(2) 也遇到 Link问题 build error 找不到符号RNFSPackage /Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example/android/app/src/main/java/com/example/MainApplication.java:31: 错误: 找不到符号 packages.add(new RNFSPackage()); ^ 符号: 类 RNFSPackage * What went wrong: Execution failed for task ':app:compileDebugJavaWithJavac'. \u003e Compilation failed; see the compiler error output for details. 在build.gradle的dependencies {...}内添加 implementation project(':react-native-fs') build error ':react-native-fs' could not be found in project ':app' FAILURE: Build failed with an exception. * Where: Build file '/Users/yestin/Desktop/code_test/react-native/react-native-remote-font/example/android/app/build.gradle' line: 197 * What went wrong: A problem occurred evaluating project ':app'. \u003e Project with path ':react-native-fs' could not be found in project ':app'. 在settings.gradle 添加 path include ':react-native-fs' project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android') 运行成功了，但弹窗报错 build error TypeError: null ... RNFSManager TypeError: null is not an object (evaluating 'RNFSManager.RNFSFileTypeRegular') 发现搜不到RNFSManager被引用的地方 于是在MainApplication.java中getPackages(){...}内添加 // react-native-fs import com.rnfs.RNFSPackage; packages.add(new RNFSPackage()); 至此，终于 不报错了。。。 ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:5:2","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"发布 确认本地是否成功登陆npm认证成功 npm whoami zyestin 若未登录，则执行npm adduser 执行npm publish 报错，是因为我刚删除了同名库，想重发一个，却失败了。 而npm规则是 24小时才能发布刚删除的同名的包 18 http fetch PUT 403 https://registry.npmjs.org/react-native-remote-font 1544ms 19 verbose stack Error: 403 Forbidden - PUT https://registry.npmjs.org/react-native-remote-font - react-native-remote-font cannot be republished until 24 hours have passed. ","date":"2023-11-01","objectID":"/zyestin/create-npm-lib/:6:0","tags":["contribution","package","react-native"],"title":"用脚手架 制作一个RN库 放npm","uri":"/zyestin/create-npm-lib/"},{"categories":["react-native"],"content":"示例效果展示 切换到新字体，经过loading后，应用上新字体 切换到已加载过的字体，直接应用上 iOS Android ","date":"2023-11-01","objectID":"/zyestin/art-text/:1:0","tags":["best-practice","react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":["react-native"],"content":"使用/Usage 封装后，如下这样使用，解耦的干干净净 import { StyleSheet, Text, TouchableOpacity, View } from \"react-native\"; import React, { useState } from \"react\"; import ArtText from \"./ArtText\"; const ArtTextDemo = () =\u003e { const [fontInfoIndex, setFontInfoIndex] = useState(0); return ( \u003cView style={{ flex: 1, padding:100 }}\u003e \u003cTouchableOpacity style={{padding:10}} onPress={() =\u003e { setFontInfoIndex((fontInfoIndex + 1) % fontInfoList.length); }} \u003e \u003cText\u003e{\"Switch Font\"}\u003c/Text\u003e \u003c/TouchableOpacity\u003e \u003cText style={{ marginVertical: 20 }}\u003e {\"Current font - \" + fontInfoIndex + \" - \" + fontInfoList[fontInfoIndex].fontName} \u003c/Text\u003e \u003cArtText text=\"Hello World\" style={{ fontSize: 20 }} fontInfo={fontInfoList[fontInfoIndex]} /\u003e \u003c/View\u003e ); }; const fontInfoList = [ { fontName: \"美呗嘿嘿体\", fontUrl: \"https://imgcn.cdn.com/app/download/fonts/meibeiheiehiti2.ttf\", }, ... ]; ","date":"2023-11-01","objectID":"/zyestin/art-text/:2:0","tags":["best-practice","react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":["react-native"],"content":"源码/Code RN组件 ArtText.js iOS桥接类 CustomFontManager.h CustomFontManager.m Android桥接类 WordArtModule.java ","date":"2023-11-01","objectID":"/zyestin/art-text/:3:0","tags":["best-practice","react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":["react-native"],"content":"逻辑解读 1.切换字体背后 会经历什么 判断若是新字体，需要经历如下过程，使字体达到可以应用到Text组件里的状态 字体文件夹不存在则创建 下载字体到指定路径 通过原生层处理使得字体达到可应用状态 若是切换到旧字体会省略其中一些步骤 2.为什么有个「可应用」状态 这是由iOS、安卓原生决定的 iOS 不仅需要下载到本地就完事了，还需要加载到内存，再设置RN的Text组件的fontFamily就不会报错/失效了 Android 则是需要拿到Text组件所对应的原生对象，通过将JS层的target ID传到原生去，在原生层去应用字体的 3.其中有哪些需要注意的？ RN应用 所下载的远程字体，不仅应用起来麻烦 需要原生层处理一道，而且在style的设置上还要做特别处理规避bug，并且两端还有差异，如下 iOS，若在字体未达到可应用状态时，提前为Text设置了fontFamily，App在debugging时会发生报错。。。 Android，通过原生去设置远程下载的字体，若再在style里设置fontFamily，竟然会导致字体会应用失效。。。 BTW：文章开头的示例效果，所对应的Demo ArtTextDemo 后来，基于这份代码，制作了一个npm库 react-native-remote-font ","date":"2023-11-01","objectID":"/zyestin/art-text/:3:1","tags":["best-practice","react-native"],"title":"远程字体的动态加载\u0026应用","uri":"/zyestin/art-text/"},{"categories":["write"],"content":"2023最新 hugo + github pages 使用方式 网上大多是hugo旧版的使用方式，有好几处明显差异的，不值得借鉴，反正我借鉴后出现各种莫名其妙问题 严格按照官方这两个链接，就不会出现问题: hugo quick start hugo new site quickstart cd quickstart git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo \"theme = 'ananke'\" \u003e\u003e hugo.toml hugo server hugo new content posts/my-first-post.md open content/posts/my-first-post.md //然后进行修改 hugo server -D //可以编辑后， 在 http://localhost:1313/ 进行预览 hugo //生成web静态资源，以便下一步提交github时进行部署 Host on GitHub Pages 需要注意的地方: 请先尝试 hugo文档里提供的theme，即ananke，走通一遍流程 我就采坑了，使用了另一个theme，后面在 localhost 一直不出现 my-first-post.md .github/workflows/hugo.yaml 一定要注意修改 HUGO_VERSION 的值 my-first-post.md 注意删掉/注释掉 draft:true 这样 push到github时，public/index.html等几个文件中才包含了 my-first-post.md的内容，访问 https://zyestin.github.io/zyestin/ 时才能找到 my-first-post.md入口 ","date":"2023-08-24","objectID":"/zyestin/hugo-usage/:0:0","tags":["tool","write"],"title":"hugo + github pages usage","uri":"/zyestin/hugo-usage/"}] \ No newline at end of file diff --git a/public/index.xml b/public/index.xml index 623d4f6..27a701d 100644 --- a/public/index.xml +++ b/public/index.xml @@ -2,7 +2,7 @@ zyestin https://zyestin.github.io/zyestin/ - Hugo theme - LoveIt + zyestin2 Hugo -- gohugo.ioenzyestin@gmail.com (zyestin) zyestin@gmail.com (zyestin)This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.Tue, 05 Mar 2024 19:36:11 +0800 diff --git a/public/multi-gestture-sticker/index.html b/public/multi-gestture-sticker/index.html index 9ff64a8..34a44ea 100644 --- a/public/multi-gestture-sticker/index.html +++ b/public/multi-gestture-sticker/index.html @@ -4,7 +4,7 @@ - RN 动画 - 缩放、旋转、拖拽 - zyestin + RN 动画 - 缩放、旋转、拖拽 - zyestin - + - + - +
- LoveIt + zyestin
Posts Tags Categories Docs About @@ -91,7 +91,7 @@
- LoveIt + zyestin

RN 动画 - 缩放、旋转、拖拽

-
zyestin
+
zyestin included in react-native
   53 words   One minute 
@@ -228,21 +228,21 @@

解读
- Updated on 2023-11-24  - d4b8265 + Updated on 2024-04-10  + f65f9fd
Read Markdown
- +

-
 react-native
+
 best-practice, react-native
Back | Home
diff --git a/public/page/2/index.html b/public/page/2/index.html index 36945de..418ae3e 100644 --- a/public/page/2/index.html +++ b/public/page/2/index.html @@ -5,14 +5,14 @@ - zyestin - + zyestin + - + - - + + @@ -25,7 +25,7 @@ "url": "https:\/\/zyestin.github.io\/zyestin\/","inLanguage": "en","author": { "@type": "Person", "name": "zyestin" - },"description": "Hugo theme - LoveIt","image": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","thumbnailUrl": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","name": "zyestin" + },"description": "zyestin2","image": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","thumbnailUrl": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","name": "zyestin" } @@ -33,7 +33,7 @@
- LoveIt + zyestin
Posts Tags Categories Docs About @@ -59,7 +59,7 @@
- LoveIt + zyestin

Hello

patch-package 补丁工具使用 -

zyestin published on
patch-package 官方地址 https://www.npmjs.com/package/patch-package +
zyestin published on  included in npm
patch-package 官方地址 https://www.npmjs.com/package/patch-package 首次安装 失败&&解决 package.json内scripts下 添加 1 "postinstall": "patch-package" 安装，失败 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 npm i patch-package 10:18:05 npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED npm ERR! FetchError: request to https://mirrors.huaweicloud.com/repository/npm/patch-package failed, reason: connect ECONNREFUSED 127.0.0.1:1087 npm ERR! at ClientRequest.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) npm ERR! at ClientRequest.emit (events.js:400:28) npm ERR!
Read More
-  react-native
+  tool, npm

React Native 在VSCode编码提效 -

zyestin published on
插件 代码智能提示 copilot +
zyestin published on  included in react-native
插件 代码智能提示 copilot 触发内联建议 Option (⌥)+\ https://docs.github.com/zh/copilot/configuring-github-copilot/configuring-github-copilot-in-your-environment?tool=vscode#keyboard-shortcuts-for-macos (键联提示)代码片段 ES7+ React/Redux/React-Native snippets massCode assistant (配合打开massCode App使用) 标签修改 自动首尾同步 Auto Rename Tag @@ -129,10 +129,10 @@ Mac、VSC快捷键 Mac 系统自带 (shift+) ctrl+ (option+) f/b (shift+) ctrl+ p/n VSC 更改了上述快捷键对应的指令，非常糟糕。可以调整下如下 VSC Next Change （Important）
Read More
-  react-native
+  tool, react-native

React Native 开发沉淀 -

zyestin published on
一些业务的最佳实践探索 基础组件封装 +
zyestin published on  included in react-native
一些业务的最佳实践探索 基础组件封装 瀑布流列表base组件 图片base组件 … 实现 模仿抖音、小红书 输入 #标签 高亮 瀑布流列表 瀑布流最佳实践：双列均匀分布，高度计算&缓存 实现 瀑布流列表·自动滚动动画 实现 横向·瀑布流列表 实现 仿抖音/小红书 对贴图/贴字 进行拖拽、缩放、旋转等复杂手势 @@ -152,17 +152,17 @@ 学习《React Hooks 核心原理与实战》笔记 常用hooks依赖检查，从源头提醒避免奇葩bug … npm 好用工具 patch-package 补丁工具使用 … 从0到1用Jenkins实现对RN项目一键打包、发布
Read More
-  react-native
+  contribution, react-native

React 学习 -

zyestin published on
学习《React Hooks 核心原理与实战》笔记 +
zyestin published on  included in react
学习《React Hooks 核心原理与实战》笔记 hooks开发工具 常用hooks依赖检查，从源头提醒避免奇葩bug[todo] …
Read More
-  react-native
+  learn, react

RN 动画 - 缩放、旋转、拖拽 -

zyestin published on
需求 仿抖音、小红书，图片视频编辑区，贴图、贴文字功能 +
zyestin published on  included in react-native
需求 仿抖音、小红书，图片视频编辑区，贴图、贴文字功能 View支持拖拽 View右下角有一个icon比较特殊，该icon可控制View缩放 icon随手指移动 View缩放（以View中心点为圆心） View会旋转（以View为中心点为圆心） icon位置一直保持在View右下角 View支持双指捏 进行缩放 效果图 源码 HBMultiGestureView.js calculator.js CornerToolGestureView.js 解读 HBMultiGestureView.js 使用的什么手势api？ 通过PanResponder为Animted.View添加手势 将不同的手势操作 处理为拖拽、旋转、缩放等UI表现，从哪着手？ 通过手势回调onPanResponderGrant、onPanResponderMove、onPanResponderRelease去 如何判断 确定是否操作的右下角特殊icon视图？ 右下角icon onLoad后，拿到target，通过入参rotateScaleTargetRef传递给HBMultiGestureView，HBMultiGestureView内 通过手势回调参数中的e.nativeEvent.target获取所操作的视图target，比较判断是否相等 @@ -176,13 +176,13 @@ HBMultiGestureView就类似一个三方库，不是面向具体业务的，俗话说就是，开发时直接用它去组装UI 不够简单，于是封装为更好用的组件CornerToolGestureView，用于各个地方。 就像是react-native-fast-image，我们并不在开发功能时直接用它，往往会对这个三方组件封装一层(e.g.增加了设置error占位图能力)，再去用于各个地方，比如 我们封装的图片base组件
Read More
-  react-native
+  best-practice, react-native

从0到1用Jenkins实现对RN项目一键打包、发布 -

zyestin published on
Jenkins for iOS（第二次搭建记录） 运行环境搭建（简略版） 下载 jenkins.war jdk8 运行jenkins 首次设置账户信息（备忘） 账户: admin 密码: admin +
zyestin published on  included in react-native
Jenkins for iOS（第二次搭建记录） 运行环境搭建（简略版） 下载 jenkins.war jdk8 运行jenkins 首次设置账户信息（备忘） 账户: admin 密码: admin 建Job & 配置 建第一个Job 设置Git 添加git 地址 添加ssh凭据【注意】 账号：生成ssh时的邮箱(~/.ssh/id_rsa.pub 最末尾可见） 密码：ssh秘钥（取于 ~/.ssh/id_rsa） 配置 脚本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 #!
Read More
-  react-native
+  tool, react-native, ios
  • 1 diff --git a/public/page/3/index.html b/public/page/3/index.html index b9f40a8..6f6b4ff 100644 --- a/public/page/3/index.html +++ b/public/page/3/index.html @@ -5,14 +5,14 @@ - zyestin - + zyestin + - + - - + + @@ -25,7 +25,7 @@ "url": "https:\/\/zyestin.github.io\/zyestin\/","inLanguage": "en","author": { "@type": "Person", "name": "zyestin" - },"description": "Hugo theme - LoveIt","image": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","thumbnailUrl": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","name": "zyestin" + },"description": "zyestin2","image": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","thumbnailUrl": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","name": "zyestin" } @@ -33,7 +33,7 @@
    - LoveIt + zyestin
    Posts Tags Categories Docs About @@ -59,7 +59,7 @@
    - LoveIt + zyestin

    Hello

    代码规范 -

    zyestin published on
    讨论背景 相信大家写代码时 对自己都有一些要求，比如下面的 +
    zyestin published on  included in code
    讨论背景 相信大家写代码时 对自己都有一些要求，比如下面的 基本期望：写出他人能容易看懂的代码 更高追求：写出他人看起来很爽的代码 每经历一个阶段，大家都对编码有不同程度的进步提升，可以分享；同时也会积累一些场景下代码如屎的烦恼，想要破局。 于是，阶段性的，需要一个机会，大家开个交流会进行讨论 （对于每个个体）互通有无，集思广益，团队每人都有所提升 （对于互相之间协作）更多地了解到彼此 阅读代码、写代码的风格习惯，增进理解 （对于工作）对现阶段遇到的痛点，找出更优解，或制定调研计划 每次讨论，规范条款上的收获，不在于多少，至少会收获了一些代码细节上的技巧或认知，最重要的是 大大增进了互相的了解，协作起来将越来越紧密顺畅。 @@ -113,10 +113,10 @@ 组件代码 书写顺序 示例如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 // AAView.
    Read More
    -  react-native
    +  learn, standard, code

    学习《React Hooks 核心原理与实战》笔记 -

    zyestin published on
    《React Hooks 核心原理与实战》学习 hooks Q: 为什么 Facebook 要发明React Hooks？React Hooks 解决了什么问题？ +
    zyestin published on  included in react
    《React Hooks 核心原理与实战》学习 hooks Q: 为什么 Facebook 要发明React Hooks？React Hooks 解决了什么问题？ A: 简化了逻辑重用 hooks之前，复用逻辑要用到高阶组件或者render props 组件每次渲染，内部的函数会重新创建，导致 接收传递函数的子组件 也重新渲染 @@ -130,35 +130,35 @@ 保证状态的唯一数据源 语义化的拆分复杂组件 Hooks 的一个重要规则，即：Hooks 必须在顶层作用域调用 而不能放在条件判断、循环等语句中，同时也不能在可能的 return 语句之后执行。换句话说，Hooks 必须按顺序被执行到。 容器模式，把条件判断的结果放到两个组件之中。可用Hooks替代 1 2 3 4 function CounterRenderProps({ children }) { .
    Read More
    -  react-native
    +  learn, react

    实现 差不多理想的极简RN弹窗 -

    zyestin published on
    Q: 代码调用一个弹窗的极简方式是怎样的？ A: 这样子👉🏻 XxModuleAlert.show({..}) +
    zyestin published on  included in react-native
    Q: 代码调用一个弹窗的极简方式是怎样的？ A: 这样子👉🏻 XxModuleAlert.show({..}) 为了这个极简用法的目标，我曾经 使用rn-global-modal封装过TextInputAlert，但依然有些问题或难用点，比如遮挡了Toast、更改mask颜色要改源码、布局上有些非正常的地方 因为不希望弹窗遮挡Toast，于是研究了react-native-root-toast，用的react-native-root-siblings，从而找到了封装理想弹窗的更快的方式 于是，基于react-native-root-siblings 5.0.1，造了一个 AlertManager Why need AlertManager 相信大家使用过RN官方Modal的，都知道，iOS弹窗无法弹两个，使用起来不满足高内聚低耦合，难受。。。 RN官方Modal 缺点：耦合过多！须visible属性，多1个import useState，多1行代码setVisble声明，弹窗组件须嵌入容器组件 rn-global-modal 优点：函数式调起弹窗，任意处可调用 缺点：iOS 不支持同时多层弹窗；toast的层级低于它 导致看不到/看不清 What AlertManager provide 封装者：封装出高度解耦的弹窗。 使用方：使用极简！ 优势 vs Modal：去掉visible vs rn-global-modal: 支持多层弹窗, TextInput弹窗对键盘支持更好？？ How to use AlertManager 使用方： 1 2 XxModuleAlert.show({...}); XxModuleAlert.hide(); 封装方: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class XxModuleAlert { static show() { AlertManager.show(<XxModuleView />, { key: XxModuleView.
    Read More
    -  react-native
    +  best-practice, react-native

    封装 低耦合、易用的文本输入框弹窗 -

    zyestin published on
    效果展示/UI 切换输入法，避开键盘 输入/粘帖时，文字换行，输入框高度准确变化 使用/Usage 封装后，如下这样使用，解耦的干干净净 +
    zyestin published on  included in react-native
    效果展示/UI 切换输入法，避开键盘 输入/粘帖时，文字换行，输入框高度准确变化 使用/Usage 封装后，如下这样使用，解耦的干干净净 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import TextInputAlert from "./TextInputAlert"; TextInputAlert.show({ text: "hello", // maxLength: 20, onChange: function didInputChange(text_) { console.log("didInputChange::>>", text_); }, onCompleted: () => { console.log("onCompleted::>>", content); }, }); TextInputAlert.hide(); 像原生一样调api方式展示弹窗，不需要Modal那样耦合过多（视图嵌入、visible字段控制…） 源码/Code TextInputAlert
    Read More
    -  react-native
    +  best-practice, react-native

    封装常用基础组件 -

    zyestin published on
    目录 +
    zyestin published on  included in react-native
    目录 瀑布流列表base组件 图片base组件 状态栏导航栏组件 页面左上角的返回按钮组件 瀑布流列表base组件 源码：BaseList.js 优点：将下拉刷新、上拉加载更多相关的 pageNo逻辑，封装到BaseList中，使用方仅需关注 数据请求的api，让使用方代码量降到最少。 使用示例 平替 FlatList 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import BaseList from "app/components/list/base"; import { getFanList } from "./service"; const pageSize = 10; const FanList = (props) => { const { userId } = props; const _requestFunc = (page, pageSize) => { return getFanList({ userId: userId, pageNo: page, pageSize }); }; const _renderItem = ({ item, index }) => { return <Item {.
    Read More
    -  react-native
    +  react-native, component

    模仿抖音、小红书 输入 #标签 高亮 -

    zyestin published on
    需求 当输入 以#开头的字符串，则判定为标签 并展示为蓝色 +
    zyestin published on  included in react-native
    需求 当输入 以#开头的字符串，则判定为标签 并展示为蓝色 效果图 调研 iOS的TextField可以设定attributedString富文本，但RN的TextInput是不具备的。 方案： TextInput上浮一个style大小一致的Text，TextInput文字颜色设为透明，Text内嵌套 style为蓝色的Text 用来展示#任意(至少1个)字符 diff --git a/public/page/4/index.html b/public/page/4/index.html index 99df139..6597744 100644 --- a/public/page/4/index.html +++ b/public/page/4/index.html @@ -5,14 +5,14 @@ - zyestin - + zyestin + - + - - + + @@ -25,7 +25,7 @@ "url": "https:\/\/zyestin.github.io\/zyestin\/","inLanguage": "en","author": { "@type": "Person", "name": "zyestin" - },"description": "Hugo theme - LoveIt","image": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","thumbnailUrl": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","name": "zyestin" + },"description": "zyestin2","image": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","thumbnailUrl": "https:\/\/avatars.githubusercontent.com\/u\/51897571?s=40\u0026v=4","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","name": "zyestin" } @@ -33,7 +33,7 @@
    - LoveIt + zyestin
    Posts Tags Categories Docs About @@ -59,7 +59,7 @@
    - LoveIt + zyestin

    Hello

    横向 瀑布流列表 -

    zyestin published on
    需求 效果展示 源码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import React, { useEffect, useRef, useState } from "react"; import HBImage from ".
    +
    zyestin published on  included in react-native
    需求 效果展示 源码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import React, { useEffect, useRef, useState } from "react"; import HBImage from ".
    Read More
     react-native

    用脚手架 制作一个RN库 放npm -

    zyestin published on
    脚手架 create-react-native-module +
    zyestin published on  included in react-native
    脚手架 create-react-native-module 脚手架使用（顺利） 工具安装 1 2 npm install -g yarn npm install -g create-react-native-module 脚手架命令 1 create-react-native-module RemoteFont --object-class-name react-native-remote-font --object-class-name RemoteFontLoader --native-package-id com.yestin.font --platforms ios,android --github-account zyestin --author-name yestin --author-email zyestin@gmail.com --generate-example --example-react-native-template react-native@0.62 过程中发现，若不指定--example-react-native-template react-native@0.62，发现总有这样的报错日志 1 2 3 4 5 6 7 8 9 10 11 pod --version failure, aborting with broken example app Error while creating library module react-native-remote-font Error: Command failed with ENOENT: pod --version spawnSync pod ENOENT at Object.
    Read More
    -  react-native
    +  contribution, package, react-native

    远程字体的动态加载&应用 -

    zyestin published on
    示例效果展示 切换到新字体，经过loading后，应用上新字体 切换到已加载过的字体，直接应用上 iOS Android 使用/Usage 封装后，如下这样使用，解耦的干干净净 +
    zyestin published on  included in react-native
    示例效果展示 切换到新字体，经过loading后，应用上新字体 切换到已加载过的字体，直接应用上 iOS Android 使用/Usage 封装后，如下这样使用，解耦的干干净净 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import React, { useState } from "react"; import ArtText from "./ArtText"; const ArtTextDemo = () => { const [fontInfoIndex, setFontInfoIndex] = useState(0); return ( <View style={{ flex: 1, padding:100 }}> <TouchableOpacity style={{padding:10}} onPress={() => { setFontInfoIndex((fontInfoIndex + 1) % fontInfoList.
    Read More
    -  react-native
    +  best-practice, react-native

hugo + github pages usage -

zyestin published on
2023最新 hugo + github pages 使用方式 +
zyestin published on  included in write
2023最新 hugo + github pages 使用方式 网上大多是hugo旧版的使用方式，有好几处明显差异的，不值得借鉴，反正我借鉴后出现各种莫名其妙问题 严格按照官方这两个链接，就不会出现问题: hugo quick start 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 hugo new site quickstart cd quickstart git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo "theme = 'ananke'" >> hugo.toml hugo server hugo new content posts/my-first-post.md open content/posts/my-first-post.md //然后进行修改 hugo server -D //可以编辑后， 在 http://localhost:1313/ 进行预览 hugo //生成web静态资源，以便下一步提交github时进行部署 Host on GitHub Pages 需要注意的地方: 请先尝试 hugo文档里提供的theme，即ananke，走通一遍流程 我就采坑了，使用了另一个theme，后面在 localhost 一直不出现 my-first-post.
- Read More
+ Read More
+  tool, write
  • 1 diff --git a/public/posts/index.html b/public/posts/index.html index f91de1c..8253992 100644 --- a/public/posts/index.html +++ b/public/posts/index.html @@ -4,14 +4,14 @@ - All Posts - zyestin - + All Posts - zyestin + - + - - + + @@ -23,7 +23,7 @@
    - LoveIt + zyestin
    Posts Tags Categories Docs About @@ -49,7 +49,7 @@
    - LoveIt + zyestin