ReactJS

2025-02-17 · 阅读 289 · 字数 245

bug 现象 在 Antd Pro 的 React 项目中，列表页，编辑一条记录。 为什么我点击了编辑按钮，弹窗显示的还是上一次打开的数据。 问题分析 这是一个 React 状态管理的问题。问题出在 CreateForm 组件的使用方式上。 当前的问题： 点击编辑按钮时，虽然 setCurrentRow(record) 更新了数据。但 CreateForm 组件没有正确响应新的 values prop 主要原因： CreateForm 组件可能在内部维护了自己的状态。 当 values prop 改变时，没有及时更新表单的值。 建议修改 CreateForm 组件，添加 useEffect 来 ...

阅读全文...

2025-02-02 · 阅读 503 · 字数 638

在春节假期，使用 React Native 成功开发了两款 Android App 之后。我突然想试试是否可以用 RN 开发 Windows 客户端试试，毕竟是微软官方支持的，而且 github 上 star 数也很多，应该是靠谱的。不妨动手一试。 虽然这次尝试以失败告终，但是也算是证明了直接使用 Expo 的脚手架开发 Windows 客户端并不合适。 微软官方文档 https://microsoft.github.io/react-native-windows/docs/getting-started Could not find MSBuild with VCTools for Visu ...

阅读全文...

2025-02-02 · 阅读 447 · 字数 241

尝试了一下 React Native 开发 Android App 及 Web 版本应用，发现 RN 非常好用，体验也非常丝滑。在我的红米 K80 手机上，完全感觉不到是 JS 开发的 APP。相比用原生代码开发多套，确实效率提升 N 倍。 但是也有不少坑要踩，这里简单记录一下。而且市面上的教程也偏老旧，很少用 Expo 框架来做说明，这就有必要将摸索的过程整理成笔记。 开发环境 "expo": "~52.0.27", "react-native": "0.76.6", 系列笔记 Expo 官方文档适合作为 ...

阅读全文...

2025-02-01 · 阅读 525 · 字数 311

编译出来的 React Native Android App 在打开时，有个开屏画面，一闪而过。 虽然不到一秒，但是也算非常显眼了。 这个官方的学名为 Splash Screen: The SplashScreen module from the expo-splash-screen library is used to tell the splash screen to remain visible until it has been explicitly told to hide. This is useful to do tasks that will happen behind th ...

阅读全文...

2025-02-01 · 阅读 506 · 字数 399

假期写了好几天 react native，发现越发的熟练，于是顺手开发了一个 Android 版本的 博客 app，这样就能随时在手机上写笔记了。 一共实现了三个功能界面，登录界面，列表展示页面，编辑页。 但是功能还不完善，需要像 twitter 一样，加上话题功能，及图片功能。 不过，开发速度已经超出了我的预期，在 GitHub copilot 的辅助下，大概半天就开发上线了。而且在此期间，copilot 的进步肉眼可见，例如 chat 功能在初一的更新后已经可以实时基于文件内容更新了。期间也尝试了一下这两天非常火的 deepseek，估计是用户量暴增，我用了几次要么反应慢，要么提示超时。 ...

阅读全文...

2025-02-01 · 阅读 557 · 字数 219

之前开发 app 都是基于手机系统 locale 实现多语言翻译就行。 但是在 AI 横行的时代，又多了一项需求，就是根据手机系统的语言，自动返回对应语言的聊天内容。 这样就需要传递一个语言参数给后台接口。 languageCode An IETF BCP 47 language tag without the region code. Example: 'en', 'es', 'pl'. 而 locale 则是 languageCode 和 regionCode 的组合。例如 en-US, zh-CN. 当然还有其他的 code 组合。 安装 expo-localization 依赖 在 ...

阅读全文...

2025-02-01 · 阅读 482 · 字数 240

vimeo 插件 https://www.npmjs.com/package/react-native-vimeo-iframe renderMessageVideo 但是直接使用 Vimeo 组件，会报错： Video is not implemented by GiftedChat. You need to provide your own implementation by using renderMessageVideo prop. 于是增加了 gifted chat 的自定义方法： renderMessageVideo WebView not support 增加了 render ...

阅读全文...

2025-02-01 · 阅读 721 · 字数 668

晚上实现了 React Native Gifted Chat 中渲染 Markdown 消息，折腾完之后，我甚至感觉 React Native 的库比 React 的库都可靠。 安装依赖 https://www.npmjs.com/package/react-native-markdown-display npm install react-native-markdown-display 会看到安装了最新版本的依赖 git diff .\package.json + "react-native-markdown-display": "^7.0.2&quo ...

阅读全文...

2025-02-01 · 阅读 1302 · 字数 503

Expo 这个文档写的非常好。通俗易懂。细节也到位。强烈推荐。甚至比 React Native 国内的书籍要好很多。 https://docs.expo.dev/tutorial/introduction/ 一共分9个小节, 把 react native 的基础概念都覆盖到了： Create your first app Add navigation Build a screen Use an image picker Create a modal Add gestures Take a screenshot Handle platform differences Configure sta ...

阅读全文...

2025-02-01 · 阅读 911 · 字数 562

用 React Native 开发了一个聊天的 APP，想同时支持 App 和 Web 版本。 之前一直以为 React Native 只能开发 Android 和 iOS 版本的 APP，没想到还能直接打包为 Web 版本。（当然微软也提供了 Windows 客户端版本的支持） Web 版本打包命令 npx expo export 可以看到输出如下： Starting Metro Bundler iOS Bundled 40778ms node_modules\expo-router\entry.js (1170 modules) Android Bundled 44507ms node_ ...

阅读全文...

2024-12-19 · 阅读 624 · 字数 170

目前用的是 Ant Design Pro V5， 默认的主题下，顶部导航栏是个黑白色调。黑色背景，白色文字。 正常使用场景下，其他还挺好看的。毕竟俺是尤文的球迷，这斑马色非常亲切。 但是，这次遇到公司内部一个项目，logo 有点像小菊花，配合上黑白主题，感觉是一场追悼会的风格。。。 不得已，还是把色调重新调整一下，按照前端页面的风格。 配置文件 src/global.less 在最后加上配置： .ant-pro-global-header-layout-mix { background-color: #F4F8FF !important; } .ant-pro-global-head ...

阅读全文...

2024-12-12 · 阅读 568 · 字数 299

第一次使用 Ant Design 的 AutoComplete 组件，发现当选项中有重复数据时，就会出现这种情况。 下拉过程中，出现大量不断重复的选项，严重影响使用体验。 解决方法 很简单，就是保证后台接口返回的选项列表，不要出现重复选项。 看了一下后台的 golang 逻辑，确实没有处理好前后空格的过滤，导致部分人名出现了重复选项。 但，这不是重点，重点是，我发现了 golang 新版本的 slices 去重函数，非常方便。 golang slice 去重 1.21 之后有个简单的实现方案，好在我的是 1.23: package main import ( "fmt&qu ...

阅读全文...

2024-11-22 · 阅读 651 · 字数 1068

这是一个无比诡异的 Quill 富文本编辑器组件的 bug，浪费了我周四整整一个下午。 唯一的收获是，把早已忘光的 React 组件封装，及组件通信的机制复习了一遍。 bug 现象 在一个 Ant Design Pro 写的后台操作界面中，在弹出的 Modal 组件中，内嵌一个 React Quill 的富文本编辑器组件。 进行内容编辑，输入 hello 换行，再换行，输入 world。保存。 再次打开 Modal，里面 Quill 展示的内容，会看到中间的换行不见了。。。 再次重复上面操作，hello world 直接变为了一行。 继续测试，会看到不单是换行，连列表样式也会消失。 排除服务器 ...

阅读全文...

2024-11-21 · 阅读 703 · 字数 318

作为一个 CRUD boy，经常要新建管理后台的项目。确切的说，应该是经常要 ctrl c / ctrl v 来 copy 老的项目。 但是 ant design pro 好多配置不在一个统一的配置文件中，需要去多个地方修改设置。例如： 顶部标题 登录页的标题 logo 顶部，及登录页 到处找配置，非常浪费脑细胞，本已稀疏的头发也经受不住这么折腾。所以还是能统一管理比较好。 统一配置文件在哪里 config/defaultSettings.ts 虽然这里定义了一些配置。但是像登录页的标题就不受这里控制。 登录页使用配置文件中的标题 import defaultSettings from ' ...

阅读全文...

2024-10-17 · 阅读 790 · 字数 368

AutoComplete: 支持输入的 ant design select 组件 参考： https://ant-design.antgroup.com/components/auto-complete-cn 实际上，我需要的并不是一个 select 组件，而是一个自动补全组件。 因为，select 组件并不支持自定义输入。而 AutoComplete 组件完美契合需求。 其数据结构是： const options = [ { value: 'name1' }, { value: 'name2' }, { value: 'name3' }, ]; 是否可以默认展开选型列表： d ...

阅读全文...