使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商
版本历史
- "更新 Solid useIntlayer API 用法以直接访问属性"v8.9.02026/5/4
- "添加 init 命令"v7.5.92025/12/30
- "初始化历史"v5.5.102025/6/29
此页面的内容已使用 AI 翻译。
查看英文原文的最新版本If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
使用Intlayer翻译您的Lynx and React mobile app | 国际化(i18n)
请参阅 GitHub 上的应用模板。
为什么选择 Inlayer 而不是替代品？
与“react-native-localize”或“i18next”等主要解决方案相比，Intlayer 是一个具有集成优化的解决方案，例如：
完整的山猫覆盖
Intlayer 经过优化，可与 Lynx 和 React 完美配合，提供组件级内容范围、TypeScript 支持以及扩展国际化 (i18n) 所需的所有功能。
捆绑尺寸
不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于将捆绑包和页面大小减少多达 50%。
可维护性
确定应用程序内容的范围有利于大型应用程序的维护。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有完全类型化 (fully typed)，以确保您的内容的准确性。
人工智能代理
共置内容减少大型语言模型 (LLM) 所需的上下文。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 CLI、LSP、MCP 和 agent技能，使 AI 代理的开发者体验 (DX) 更加流畅。
自动化
使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个编译器来自动提取内容，以及一个网络平台来帮助在后台翻译。
表现
将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
无需开发即可扩展
Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个自托管的可视化编辑器和一个完整的 CMS 来帮助您管理多语言内容实时，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
第 4 步：在组件中使用 Intlayer
在子组件中使用 useIntlayer 钩子以获取本地化内容。
复制代码到剪贴板
import { useCallback, useState } from "@lynx-js/react";import { useIntlayer } from "react-intlayer";import "./App.css";import arrow from "./assets/arrow.png";import lynxLogo from "./assets/lynx-logo.png";import reactLynxLogo from "./assets/react-logo.png";import { LocaleSwitcher } from "./components/LocaleSwitcher.jsx";export const App = () => { const [alterLogo, setAlterLogo] = useState(false); const { title, subtitle, description, hint } = useIntlayer("app"); const onTap = useCallback(() => { // 仅更改背景 setAlterLogo(!alterLogo); }, [alterLogo]); return ( <view> <view className="Background" /> <view className="App"> <view className="Banner"> <view className="Logo" bindtap={onTap}> {alterLogo ? ( <image src={reactLynxLogo} className="Logo--react" /> ) : ( <image src={lynxLogo} className="Logo--lynx" /> )} </view> <text className="Title">{title}</text> <text className="Subtitle">{subtitle}</text> </view> <view className="Content"> <image src={arrow} className="Arrow" /> <text className="Description">{description}</text> <text className="Hint"> {hint[0]} <text style={{ fontStyle: "italic" }}>{hint[1]}</text> {hint[2]} </text> </view> <LocaleSwitcher /> <view style={{ flex: 1 }}></view> </view> </view> );};当在基于字符串的属性中使用content.someKey（例如按钮的title或Text组件的children）时，调用content.someKey.value以获取实际字符串。
配置 TypeScript（如果您使用 TypeScript）
Intlayer 在一个隐藏文件夹中生成类型定义（默认是 .intlayer），以改进自动补全并捕获翻译错误：
复制代码到剪贴板
// tsconfig.json{ // ... 您现有的 TS 配置 "include": [ "src", // 您的源代码 ".intlayer/types/**/*.ts", // <-- 确保包含自动生成的类型 // ... 您已经包含的其他内容 ],}这使得以下功能成为可能：
- 自动补全 您的字典键。
- 类型检查 如果您访问不存在的键或类型不匹配，将发出警告。
Git 配置
为了避免提交由 Intlayer 自动生成的文件，请将以下内容添加到您的 .gitignore 中：
复制代码到剪贴板
# 忽略由 Intlayer 生成的文件.intlayerVS Code 扩展
为了提升您使用 Intlayer 的开发体验，您可以安装官方的 Intlayer VS Code 扩展。
该扩展提供：
- 翻译键的自动补全。
- 实时错误检测，用于发现缺失的翻译。
- 内联预览已翻译的内容。
- 快速操作，轻松创建和更新翻译。 有关如何使用该扩展的更多详细信息，请参阅Intlayer VS Code 扩展文档。
深入了解
- 可视化编辑器：使用Intlayer 可视化编辑器以可视化方式管理翻译。
- CMS 集成：您还可以将字典内容外部化并从CMS中获取。
- CLI 命令：探索Intlayer CLI以执行诸如提取翻译或检查缺失键等任务。