如何实现React Native多语言支持

499 阅读4分钟

在任何应用程序中提供多语言支持将更有助于针对那些不知道如何沟通和使用英语的用户。因此,我们可以在我们的 应用程序中实现**反应式 本地**多语言支持 ,这可以更有成效。许多用户希望应用程序使用他们喜欢的语言,否则,他们就会放弃这个应用程序。

你如何实现它?

1.使用以下命令创建一个新的react native项目。

npx react-native init MultiLanguageSupportDemo

2.安装节点模块和pods,并使用Xcode运行一次项目。

3. 3.你可以使用 **react-navigation**实现基本路由与底部标签导航

4.你需要 通过点击下面的命令来安装 react-native-localize, react-native-restartreact-native-event-listeners 包。

yarn add  react-native-restart  react-native-localize

5.项目结构将如下图所示。

How To Implement Multi Language Support In React Native

6.现在你必须在project->src->localization文件夹下为本地化制作一些文件。

7.7.我们要创建的第一个文件是 languagekeys.js ,因为在该文件中,我们将在字符串中添加所有键,以保持多语言功能。所以要把下面的内容粘贴到它里面。

const languagekeys = {

8.现在我们将创建 en.js ,因为在其中,我们将添加所有包含英语语言翻译的文本。所以把下面的内容粘贴到它里面。

import languagekeys from "./languagekeys";

9.现在,我们将创建 gj.js ,因为我们将添加包含古吉拉特语翻译的所有文本。所以把下面的内容粘贴到它里面。

 

10.现在,我们将创建 hin.js ,因为在其中,我们将添加包含印地语翻译的所有文本。 所以把下面的内容粘贴到它里面。

import languagekeys from "./languagekeys";

11.现在,我们必须创建一个简单的类来管理多语言支持的功能。因此,我们将制作一个 LanguageUtils.js 文件,我们必须导入以下所需的文件。

import * as RNLocalize from "react-native-localize";

12.我们将把这个类定义为一个文件名,并必须定义obj,其中包含我们需要添加到应用程序的语言数量。

export default class LanguageUtils {

13.现在,我们必须添加一个静态常量,我们将用它来改变全局语言。

static changeLanguageGlobal = "CHANGE_LANGUAGE_GLOBAL"

14.14.接下来,我们需要添加一个我们在应用程序中需要的语言数组。

 static indianLocales = ['en', "gu-IN", "hi-IN"]


15.现在我们将添加一个常量,它给我们提供当前的语言,如果没有设置,那么通过使用一个方法,我们必须设置它。所以我们将使用 react-native-localize lib的一个方法,并传递所有的locales,给出来自移动设备的最合适的语言本地化值;然后,我们可以将语言设置为本地异步存储。

static currentAppLanguage = this.setAppLangaugeFromDeviceLocale(true);

16.现在我们将添加一个方法,当我们的应用程序被安装时,我们将调用这个方法。所以基本上,它只做一件事,如果用户已经选择了语言,它将为整个应用程序设置语言;否则,它将从设备适合的locales中存储语言。

static async setAppLangaugeFromDeviceStorage() {

17.现在,我们将添加一个方法,返回特定选择的语言的本地化值,并将其显示在屏幕上。默认情况下,它返回英语语言的本地化值。

static getLangText(key) {

18.因此,整个代码将看起来像下面给出的那样。

import * as RNLocalize from "react-native-localize";

19.现在我们来看看如何使用这个类以及如何实现它的部分。

20.正如我前面所说,我们必须从设备存储中设置语言,如果用户没有选择语言,那么我们可以从设备定位中选择一种语言。我们必须把这个方法添加到我们的主应用程序路由文件中。

useEffect(() => {

21.现在主屏幕看起来就像下面这个。每当我们想显示文本时,我们需要使用 LanguageUtils.getLangText() 方法,其中我们需要传递 languagekeys的 键值,如下所示。

import React from 'react';

22.现在,在其他设置界面,我们将给出一个语言列表,用户可以从中选择他喜欢的语言。所以用户通过选择单选按钮来选择任何语言。

import React, { useEffect, useState } from 'react';

23.之后,当用户点击提交按钮时,我们将对整个应用程序的语言变化进行全局处理。所以我们将使用react-native-event-listeners模块传递一个事件。所以我们的主应用程序导航器将接收该事件,并在整个应用程序中改变语言。为此,我们必须 使用 以下模块重启我们的应用程序反应-原生-重新启动模块。

useEffect(() => {

24.以下是应用程序的截图。

How To Implement Multi Language Support In React Native How To Implement Multi Language Support In React Native How To Implement Multi Language Support In React Native How To Implement Multi Language Support In React Native How To Implement Multi Language Support In React Native

代码链接。 链接1

演示视频链接。链接2

coma

结论

如果你想在 react native 中实现多语言支持,你需要像我们一样遵循上述步骤。开发人员也可以添加其他语言,他们需要添加文件和区域划分。所以通过这个功能,我们可以接触到全世界更多的人,并扩大它的范围。