ReactJS

2025-01-16 · 阅读 163 · 字数 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-01-12 · 阅读 156 · 字数 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-01-11 · 阅读 184 · 字数 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-01-05 · 阅读 345 · 字数 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-01-03 · 阅读 481 · 字数 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 · 阅读 328 · 字数 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 · 阅读 331 · 字数 299

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

阅读全文...

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

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

阅读全文...

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

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

阅读全文...

2024-10-17 · 阅读 508 · 字数 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 ...

阅读全文...

2024-10-11 · 阅读 487 · 字数 210

使用 Antd Pro 实现了一个报价单批量查询的功能。 我想将 react 前端 table 组件的批量查询结果导出为 Excel 文件并下载。 这个不方便用后台接口实现，因为批量查询是通过多次的异步调用接口实现的。 后台并没有对应的一次性导出接口。 所以考虑采用前端实现的方案。 安装依赖 yarn add react-html-table-to-excel react 代码 import ReactHTMLTableToExcel from 'react-html-table-to-excel'; const QuotationSearch: React.FC = () => { ...

阅读全文...

2024-09-28 · 阅读 510 · 字数 535

使用场景 在实现一个批量查询的功能，前端使用 React 写了一个组件。 将多行输入分隔成多个搜索词，因为是模糊查询，搜索速度不快， 为了减少等待时间，于是每个搜索词逐一调用搜索接口。 然后，将搜索结果合并到一个数组，每返回一个结果，就立即显示。 有问题的代码 const [results, setResults] = useState<API.Item[]>([]); for (const keyword of keywords) { // 每个搜索词逐一调用搜索接口 let apiResult = await callSearchApi({keyword: keyword ...

阅读全文...

2023-10-20 · 阅读 2858 · 字数 276

发现默认安装的 react markdown 组件不支持 table 表格的渲染。 在官方文档里查了一下，需要安装额外的组件 remark-gfm 来支持 table 渲染。 安装 remark-gfm tyarn add remark-gfm 代码配置 import Markdown from "react-markdown"; import remarkGfm from "remark-gfm"; <div class="markdown_container"> <Markdown remarkPlugi ...

阅读全文...

2023-08-19 · 阅读 1187 · 字数 118

随着前端打包发布日渐频繁，之前偷懒的手动切换 API URL 的方式越来越浪费时间，所以需要能自动区分开发环境和生产环境，节省每次的发布时间。 没想到 react app 脚手架自带了这个功能，可以不依赖三方库实现开发环境的识别： var OcrUrl = "http://www.sunzhongwei.com/ocr"; if (process.env.NODE_ENV === "development") { OcrUrl = "http://localhost:5000/ocr"; } 确实贴心。 ...

阅读全文...

2023-07-16 · 阅读 1749 · 字数 225

即支持文本中的换行符，例如，后台接口返回的 message 是： 暴击 \n 100000 倍 需要能解析其中的换行符。 实际上只需要加上一行 css style={{ "white-space": "pre-line" }} 例如： <Button key={index} onClick={CardButtonOnClick(ctx)} value={item.payload} style={{ margin: "5px", "white-space": "pre-line&q ...

阅读全文...