React Native 应用程序中的国际化和本地化

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸:仿小红书(微服务架构)》 正在持续爆肝中,基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...点击查看项目介绍 ;
  • 《从零手撸:前后端分离博客项目(全栈开发)》 2 期已完结,演示链接: http://116.62.199.48/ ;

截止目前, 星球 内专栏累计输出 63w+ 字,讲解图 2808+ 张,还在持续爆肝中.. 后续还会上新更多项目,目标是将 Java 领域典型的项目都整一波,如秒杀系统, 在线商城, IM 即时通讯,权限管理,Spring Cloud Alibaba 微服务等等,已有 2200+ 小伙伴加入学习 ,欢迎点击围观

如果您一直关注我的博客和教程,您就会知道我已经发表了很多关于 Ionic Framework 的 文章。我最近听到了很多关于 React Native 的 消息,所以我认为是时候尝试一下了。

世界上有 6,500 种语言 大约 70 亿人口 。很可能您的母语只为全球一小部分人所知。您可以通过容纳更多种类的语言来提高应用程序的下载量和整体 App Store 优化 (ASO)。

去年,我做了一个关于 Ionic Framework Android 和 iOS 应用程序中的本地化 (l10n) 和国际化 (i18n) 的 教程。这次我将继续进行同样的工作,但是是在一个适用于 iOS 的 React Native 应用程序中。

如果这是您第一次了解 React Native,您应该注意,目前它仅与 iOS 兼容。我相信 Android 会在未来出现,但现在还没有。这意味着您需要一台 Mac 才能进行任何开发。

让我们首先创建一个新的 React Native 项目来开始本教程。假设您的机器上安装了 React Native,请从您的 Mac 终端应用程序运行以下命令:


 react-native init ReactProject
cd ReactProject

该项目将利用 Alexander Zaytsev 的 React Native 插件 react-native-i18n 进行任何翻译。将项目作为终端中的当前工作目录,运行以下命令:


 react-native init ReactProject
cd ReactProject

依赖项现在位于您的项目目录中,但还需要将它们添加到 Xcode 项目中。

打开项目根目录中的 ReactProject.xcodeproj 。现在右键单击 Xcode 项目树中的 Libraries 目录,然后选择 Add Files to “ReactProject”… 。您想要添加在项目的 node_modules/react-native-i18n 目录中找到的 RNI18n.xcodeproj

接下来,通过 Xcode 中 Build Phases Link Binary With Libraries 部分添加 libRNI18n.a

该插件已添加到您的项目中,但尚未添加到您的项目代码中。

打开位于项目根目录下的 index.ios.js 并包含以下行:


 react-native init ReactProject
cd ReactProject

接下来的很多内容都来自插件的文档。

根据文档,它建议您使用语言回退。例如,您可以选择为 en_US en_GB 添加翻译,但启用回退后,您可以为 en 添加更通用的翻译。可以通过添加以下内容来启用此回退:


 react-native init ReactProject
cd ReactProject

现在让我们看看添加一些翻译需要什么。我们基本上只是为我们希望使用的任何语言环境创建一个具有父属性的对象。例如:


 react-native init ReactProject
cd ReactProject

在上面的对象中,我们有三种不同的语言都使用回退值。我们有英语、西班牙语和法语的问候语和结束语。在我们看来,这些翻译后的变量可以像下面这样使用:


 react-native init ReactProject
cd ReactProject

为了更好地了解这一切,您的完整 index.ios.js 文件可能如下所示:


 react-native init ReactProject
cd ReactProject

我已经继续并突出显示了重要的代码行。

结论

就像 Ionic Framework 的 Angular Translate 一样,我们可以将本地化和国际化功能添加到我们的 React Native 应用程序中。这是提升 App Store Optimization (ASO) 的绝佳方式,因为您的应用程序现在将覆盖更多受众。

可以在下面看到本文的视频版本。


相关文章