React-Native 本地化

2025年3月17日 | 阅读 15 分钟

本地化是指将一个字符定位或限制在特定位置。在应用程序开发中，它指的是根据当地语言开发应用程序。

对于本地化，我们将使用 `react-native-localization` 库中的 `LocalizedStrings` 组件。

这是一个用于本地化 ReactNative 接口的类。

如果您想在 React 项目中共享代码，请使用 `react-localize` 或通用的 JavaScript 本地化字符串。

版本 1. x. 注意

此库已重新编译，以使用新创建的本地化字符串包，该包现在已添加为依赖项，以便代码更加集成且易于维护。

所有原生代码都是本地化字符串项目，`react-localization` 版本支持在格式化字符串中嵌入 JSX 代码来覆盖 `formatString`。

此版本添加了一个自定义的 `getInterfaceLanguage` 版本，用于检索原生操作系统界面语言。

为了简化 Android 版本的配置，2.0 及更高版本仅支持 ReactNative >= 0.56.0

我们只需要一种简单的方式来国际化我们的第一个 React Native 应用。

最初，我们考虑将原生的 iOS 国际化 API 暴露给 React Native。然后，我们选择了我认为更符合 React 精神的解决方案。

在此实现中，我们可以将本地化字符串与样式应用在同一个 React View 文件中（我不能否认这种方法在翻译字符串方面可能存在一些重复）。

但是，它使得通用 JS 模块可以成为不同视图所需的通用字符串源）。

在集成此类原生插件之前，有必要排除由 Expo 创建的应用程序。所以如果您使用了 Create React Native App 快捷方式，您应该删除该应用程序。

它是如何工作的？

JavaScript 库主要使用 React Localization 库来获取当前的界面语言。加载并显示与当前界面区域设置或默认语言匹配的字符串（如果没有找到特定区域设置，则显示第一个）。

可以强制使用不同于界面语言的语言。

设施

最简单的安装方法是在 `react-native` 项目文件夹中输入 2 条命令即可完成

yarn add react-native-localization 
or
npm i react-native-localization
#react-native >= 0.60
cd ios && pod install && cd ..
#react-native < 0.60
react-native link react-native-localization

如果您看到任何错误，请不要忘记重启 Node 服务器。

如果安装 Android 版本时仍然遇到问题，请检查链接器是否自动执行了“Android 手动安装”的第 4 步。

Windows 平台不支持链接器的自动安装。仅支持手动安装。

手动安装 iOS

npm install --save react-native-localization
在 XCode 的“项目导航器”中，右键单击项目中的“Libraries”文件夹，然后添加文件到 <...>。
转到 `node_modules` → 然后是 `react-native-localization`，添加 `ReactNativeLocalization.xcodeproj`。
将 `libReactNativeLocalization` 添加到“构建阶段”→“链接二进制文件”
最后，构建并运行库

手动安装 Android

在 `android/setting.gradle` 中

...
includes ':react-native-location', ':application'
project(':react-native-localization').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localization/android')

在 `android/app/build.gradle` 中

...
dependencies {
    ...
    compile project(':react-native-localization')
}
register module 
import com.babisoft.ReactNativeLocalization.ReactNativeLocalizationPackage;// <--- import
public class MainApplication extends Application implements ReactApplication {
  ......
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactNativeLocalizationPackage()
      );
    }
  ......
}

手动安装 Windows

运行 `npm install --save react-native-localization`
打开 Visual Studio 解决方案。
右键单击“解决方案资源管理器”
选择“添加”→“现有项目”
在资源管理器窗口中选择 `.csproj` 依赖项。该依赖项位于 `node_modules\react-native-localization\windows\ReactNativeLocalization`
右键单击“解决方案资源管理器”中的通用 Windows 应用项目。
选择“添加”→“引用”
选择 `ReactNativeLocalization` 项目。
打开 `homepage.cs`
将新的 `ReactNativeLocalization.RNLocalizationPackage()` 添加到 `MainPage.cs` 中的包列表中

用途

在您要本地化的 React 类中，需要导入库和传递给构造函数的 `Strings` 对象。`Strings` 对象是一个简单的对象，包含一个语言键（例如：N、It、Fr…），然后通过所需的键值定义一个本地化字符串对列表。

// ES6 syntax
import localized strings from 'react-native-localization';
// CommonJS syntax
// let LocalizedStrings = require('react-native-localization');
let strings = new LocalizedStrings({
 "In us":{
   how:"How do we want our egg today?",
   boiled-egg:"Boiled Egg",
   softBoiledEgg:"Soft Boiled Egg",
   choice:"How to chose the egg"
 },
 it is:{
   how: "How do we want the egg today?",
   boiled-egg: "Boiled Egg",
   softBoiledEgg: "Soft Boiled Egg",
   choice: "How to choose the egg."
 },
 its: {
   how: "Come vuoi il tuo uovo oggi?",
   boiled egg: "Uovo sodo",
   softBoiledEgg:"Uovo alla coque",
   choice: "Come scegliere l'uovo"
 }
});

然后，在 `render` 方法中使用 `strings` 对象来访问本地化字符串的键。

<text style={styles.title}>
  {strings.how}
</Text>

第一种语言是默认语言，因此会显示选定的语言，如果缺少任何翻译，则会在日志中记录下来。

更新/覆盖区域设置

您默认已进行本地化构建，但从服务器下载了本地化字符串。使用内容来覆盖整个对象。

注意：这将删除所有使用的本地化内容。

strings.setContent({
  it is:{
    how: "How do you want your egg today?",
    boiled-egg: "Boiled Egg",
    softBoiledEgg: "Soft Boiled Egg",
    choice: "How to choose the egg."
  }
})

您可以覆盖特定语言

strings.setContent(Object.assign({},strings.getContent(),
{
  it is:{
    how: "How do we want the egg today?",
    boiled-egg: "Boiled Egg",
    softBoiledEgg: "Soft Boiled Egg",
    choice: "How to choose the egg."
  }
}));

TypeScript

For TypeScript, the tsconfig.json look like this:
{
    "Compiler Options": {
        "target": "is2015",
        "module": "es2015",
        "jsx": "react native",
        "moduleResolution": "node",
        "allow synthetic default imports": true
    }
}

其中 `"module": "es2015"` 对于轻松导入模块至关重要。

导入如下所示

API

`setLanguage(languageCode)` - 手动设置特定语言
`getLanguage()` - 用于获取显示的语言
`getInterfaceLanguage()` - 用于获取当前设备界面语言
`formatString()` - 用于格式化字符串，用参数字符串替换占位符。
getAvailableLanguages() - 用于获取构造函数中传递的语言数组。

en:{
    bread:"butter",
    butter:"bread",
    question:"I'd like {0} and {1}, or just {0}"
  }
  ...
  strings.formatString(strings.question, strings.butter, strings.bread)

示例

_onSetLanguageToItalian() {
    strings.setLanguage('is');
    this.setState({});
}

可以使用以下代码片段直接在 Xcode 项目中设置语言

[[NSUserDefaults standardUserDefaults] setObject:[NSArray arrayWithObjects:@"de", nil] forKey:@"AppleLanguages"];

React Native 中的国际化和本地化

国际化，或 i18n，是指创建可以适应不同文化、地区和语言的应用程序的过程。

然而，本地化，或 l10n，涉及翻译成用户指定的地点或语言，并通过国际化来实现。

本地化任何应用程序都 like 创建以支持多种语言或地区，使其能够被广泛的用户访问和使用。

在移动应用开发中，本地化会获取用户设备的语言和地区，这与用户的地理位置不同，并编写软件进行适应。

本地化应用程序将是一个挑战，但借助 `expo-localization` 和 `i18n-js`，我们将学习如何在 Expo 和 React 应用程序中实现本地化。

在开始之前，您应该在系统中安装以下软件

Node.js
如果您使用的是 macOS，则需要 Watchman

React Native 配置

此外，除了暴露本地化 SDK，我们还可以使用 `react-native-localize` 这样的库。但这个工具箱仅支持 React Native，并且由于它是原生模块，因此不支持 Expo 应用（除非移除 Expo）。

使用 expo-location

Exposure Localization SDK 为我们提供了访问用户原生设备上的本地数据的能力，包括 `isoCurrencyCodes` 常量，它返回用户设备上所有支持的货币代码的数组，以及 `timezone` 常量，它返回设备的时区。

现在，让我们本地化一个 Expo 应用和 `i18n-js`。

创建 Expo 应用

让我们使用 Expo CLI 生成一个 Expo 应用来开始。打开新的终端并运行命令来生成 Expo 应用

在这里选择一个空白模板。它为我们提供了开始所需的最少依赖项。

要打开应用程序，请导航到新创建的应用程序的根目录并相应地运行命令

对于 iOS

yarn is
# or
npm run ios
# For Android
yarn android
# or
yarn android

命令输出以下屏幕

安装依赖项

现在我们已经构建了一个 Expo 应用，在导航到应用程序目录后，我们可以将 `expo-localization` 和 `i18n-js` 安装为依赖项。

运行以下任一命令来安装这两个软件包:

thread add expose-localization i18n-js
#either
npm i expo-localization i18n-js

提取和集中应用程序的文本

本地化我们的应用程序的一个重要步骤是提取和集中用户将在单独文件中交互的文本。这使我们能够根据用户设备的区域设置有条件地向用户显示文本。

首先，在 `i18n/supportedLanguages.js` 创建一个文件；我们将在其中放置所有用户交互的文本，而不是代码。

该应用程序将支持三种语言：英语、中文和西班牙语。通过添加下面的代码行，我们创建了一个键值对的 JavaScript 对象。每种语言都有一个键，但值不同

constant in = {
  welcome: 'Internationalization and localization in React Native,'
  signoutBtn: 'Sign Out',
  signOutAlertTitle: 'Cancel',
  signOutAlertMess: 'Are you sure you want to sign out?',
  confirm: 'OK',
  resetBtn: 'Reset password',
};
constant zh = {
  welcome: 'React Native ?????????',
  signoutBtn: '??',
  signOutAlertTitle: '??',
  signOutAlertMess: '????????',
  confirm: '??',
  resetBtn: '????',
};
const is = {
  welcome: 'Internationalization and localization in React Native',
  signoutBtn: 'signout',
  signOutAlertTitle: 'Cancel',
  signOutAlertMess: 'Are you sure you want to sign out?',
  confirm: 'Okay',
  resetBtn: 'Reset password',
};
export { zh, in, is };

稍后，我们将导入不同的语言来替换当前字符串，并使用代表用户区域设置文本的键值。

expo-localization SDK 通过调用 `locale` 常量为我们提供了用户设备的区域设置，该常量访问设备的语言代码。

添加国际化功能

让我们在语言配置文件中导入我们最近安装的两个软件包，以添加国际化功能

import * as Location of 'expo-location';
import i18n from 'i18n-js';
import { zh, en, is } from './i18n/supportedLanguages';

在导入语句之后，添加以下代码行

i18n.fallbacks = true;
i18n.translations = { en, zh, is };
i18n.locale = Location.locale;

`i18n.backups = true`。我们启用了本地备份功能。例如，如果我们没有为西班牙语指定“重置密码”的文本，则会返回默认语言的文本。

`i18n.translations = { en, zh, es }` 配置了我们希望在应用程序中支持的语言的键值对。

并且，通过 `i18n.locale = Localization.locale`，我们正在根据用户设备设置来设置我们应用程序的区域设置。

使用 i18n-js 进行应用程序文本本地化

要在应用程序中获取本地化文本，我们需要调用 `i18n.t()` 函数并将要翻译的键作为字符串传递。假设我们要本地化我们应用程序的欢迎文本。我们可以添加以下内容

>// jsx
<Text>{i18n.t('welcome')}</Text>

它根据用户设备的区域设置，为我们提供导入的配置对象中 `welcome` 键的值。

设备的“欢迎”键设置为英语。

设备的“欢迎”键将设置为中文。

为了在 iOS 模拟器中演示设备本地化，请打开设备设置，然后转到“通用”>“语言与地区”>“iPhone 语言”。选择中文或西班牙语，以查看文本如何根据所选语言有条件地渲染。

在 Android iOS 模拟器上，打开菜单 > 设置 > 语言和键盘 > 选择区域设置。

选择区域设置后，iOS 模拟器中最终本地化的 Expo 应用外观如下

如果我们想在不进入设备设置的情况下更改设备区域设置，我们可以将 `i18n.locale = Localization.locale` 更改为 `i18n.locale = 'es'` 来获取应用程序的西班牙语本地化版本，或者支持该应用程序的任何语言代码…

纯 React Native 应用

生成新的 React Native 项目

要开始使用 React Native 应用，让我们使用以下命令创建一个 React Native 项目

这会生成一个空的 React Native 项目并安装必要的依赖项。

导航到我们新创建的应用程序的根目录并运行命令来打开应用程序

# start
npx react-native start
#to open a new terminal:
npx react-native run-android
# either of it
react-native run-ios

让我们看看如何在 React Native 应用中使用 Expo Localization SDK 和 i18n-js。

要开始，请安装并配置 `react-native-unimodules` 包，作为 React Native 项目中的依赖项

add thread react-native unimodules
thread add pod-install
#or
npm install react-native-unimodules
npx pod-install

遵循 iOS 和 Android 的附加设置。

现在，我们应该安装必要的依赖项。运行以下任一命令来安装这两个包

thread add expose-localization i18n-js
#or
npm i expo-localization i18n-js

安装完成后，按照我们 Expo 应用中的步骤本地化 React Native 应用。以下是使用 `expo-localization` SDK 和 `i18n-js` 的本地化 React Native 应用的演示。

LogRocket 是一个 React Native 监控解决方案，可帮助即时重现问题、优先处理 bug 并了解 React Native 应用的性能。

LogRocket 还可以通过显示用户与我们应用程序的交互来帮助我们提高转化率和产品使用率。LogRocket 的产品分析功能显示用户未能完成某个流程或采用新功能。

为多语言应用配置原生 React 本地化

React Native Localization (RNL) 使本地化更容易实现，显著缩短了开发时间。这是一个设置 RNL 的分步指南，以及部署多语言应用程序的一些技巧。

配置原生 React 本地化

只需两条命令即可安装该库

yarn add react-native-localization
cd ios && pod install

接下来，我们需要定义我们的字符串。这是一个本地化字符串列表，或创建一个结构来访问它们。这些结构如下所示

TYPESCRIPT

{
  "it is": {
    Hello, hello!",
    Good morning Good Morning."
  },
  "it is": {
    Hello, hello!",
    Good morning Good Morning."
  }
}

我们倾向于将翻译按语言文件分开。我们有 `en.ts` 用于英语，`es.ts` 用于西班牙语。

TYPESCRIPT

// en.ts
default export {
  Hello, hello!",
  Good morning Good Morning."
}

// en.ts
default export {
  Hello, hello!",
  Good morning Good Morning."
}

然后，我们可以将这些文件导入到我们的字符串文件中，并像前面的示例一样使用它们。

TYPESCRIPT

import localized strings from "react-native-localization";
import English from './en.'
import Spanish from './es.'

export const strings = new LocalizedStrings({
  "its English,
  "it is Spanish
});

要访问字符串，我们可以简单地向 `LocalizedStrings` 对象请求它们。React 的原生本地化库将使用设备的区域设置来确定使用哪种语言。

TYPESCRIPT

export class Title extends PureComponent {
  to loan() {
    return (
      <View>
        <Text>
          {strings.hello}
        </Text>
      </View>
    );
  }
}

如果我们的设备语言设置为英语，这将显示为“Hello！”。如果语言设置为西班牙语，则会显示为“¡Hola！”。

技巧和窍门

确定设备语言

要从库中检索设备区域设置（或界面语言），请运行

TYPESCRIPT

使用 RNL，可以以编程方式设置语言，即使是与设备语言不同的语言。

TYPESCRIPT

设置语言后，我们可以从库中获取应用程序的语言。这与界面语言不同。

TYPESCRIPT

默认语言

在某些情况下，可能没有特定单词的翻译。发生这种情况时，库将选择一个默认语言字符串。默认语言只是传递给本地化字符串构造函数的列表中的第一种语言。

React Native Localization 是一个强大的工具。如果您有任何使其发挥更大作用的技巧，请告诉我。

React Native 本地化

这是一个在 React Native 多语言应用中进行本地化的示例。本地化是指将一个地方或限制在一个地方。在应用程序开发的情况下，它与根据当地语言开发应用程序有关。

我们使用 `react-native-localization` 库中的 `LocalizedStrings` 组件进行本地化。

如何使用 Localized Strings 组件？

以下是我们在示例中使用的 LocalizedStrings 的代码片段。

const strings = new LocalizedStrings({
hi: {
first:"???? ??? ?? ?",
second:"??? ??? ??? ?",
},
"ma":{
first:"?? ??? ???? ?",
second:"?? ??? ??? ?",
},
"en":{
first:"How are You ?",
second:"I am fine ",
},
"fr":{
first:"comment allez vous",
second:"je vais bien",
}
});

在此示例中，我们将创建一个启动屏幕来选择语言，然后根据通用的字符串存储库在下一个屏幕上显示文本内容，在该存储库中，我们为每个语言代码定义了相同的文本。

创建一个 React Native 应用。

开始使用 React Native 将帮助我们学习如何创建一个 React Native 项目。我们将使用 `react-native init` 来创建 React Native 应用。如果您安装了 Node，您可以使用 npm 来安装 `react-native-CLI` 命令。

打开终端并运行。

运行以下命令来创建一个新的 React Native 项目

如果您想使用特定版本的 React Native 启动新项目，可以使用 `--version` 参数

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

在项目目录中，我们需要创建一个项目结构，其中有一个名为 `App.js` 的索引文件。

安装依赖项

要安装依赖项，请打开终端并启动项目

1. 首先，安装 `react-native-localization` 依赖项以导入 `LocalizedStrings`

2. 安装 `react-navigation` 的依赖项

npm install @react-navigation/native --save
npm install @react-navigation/stack --save
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save

这些命令会将所有依赖项复制到 `node_module` 目录。

CocoaPods 安装

使用以下命令安装 CocoaPods

项目结构

我们使用的是以下项目结构。

创建多语言应用的 so

如果您已完成项目结构，请替换以下代码

Application.js

// Localization example in React Native Multi Language app
// https://aboutreact.com/localization-in-react-native/
import 'native react gesture controller';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import LanguageSelectionScreen from './pages/LanguageSelectionScreen';
import ContentScreen from './pages/ContentScreen';
const Stack = createStackNavigator();
Application constant = () => {
return (
<Navigation Container>
<Stack.Navigator initialRouteName="Language selection screen">
<Stack.Display
name="Language selection screen"
component={Language selection screen}
options = {{displayed header: false}}
/>
<Stack.Display
name="Content screen"
component={content screen}
options={{
title: 'Content Screen', //Set Header Title
header style: {
backgroundColor: '#f4511e', //Set the header color
},
headerTintColor: '#fff', //Sets the color of the header text
Header title style: {
fontWeight: 'bold', // Set header text style
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default app;

LanguageSelectionScreen.js

// Localization example in React Native Multi Language app
// https://aboutreact.com/localization-in-react-native/
import React, {useEffect} from 'react';
to import {
See safe area,
View,
Text,
scroll view,
Image,
style sheet,
} from 'react native';
import StringsOfLanguages from './StringsOfLanguages';
const LanguageSelectionScreen = ({navigation}) => {
const lang = [
{short form: 'hello', long form: 'Hindi'},
{short form: 'ma', long form: 'marathi'},
{short form: 'en', long form: 'english'},
{short form: 'fr', long form: 'french'},
];
const settext = (value) => {
StringsOfLanguages.setLanguage(value);
navigation.navigate('ContentScreen', {selected language: value});
};
return (
<style SafeAreaView={{flex: 1}}>
<View style={styles.container}>
<text style={styles.titlestyle}>
Select preferred language
</Text>
<Image
source={{
Ury:
'https://raw.githubusercontent.com/AboutReact/sampleresource/master/language.png',
}}
style={styles.imageStyle}
/>
<ScrollView style={{marginTop: 30, width: '80%'}}>
{lang.map((element, key) => (
<View style={styles.elementContainer} key={key}>
<Text
onPress={() => settext(item.shortform)}
style={styles.textStyle}>
{element.long form}
</Text>
<View style={styles.saparatorStyle} />
</View>
))}
</scroll view>
<Text
style={{
font size: 18,
textAlign: 'center',
Gray',
}}>
Localization example in React Native
(Multilingual application)
</Text>
<Text
style={{
font size: 16,
textAlign: 'center',
Gray',
}}>
www.aboutreact.com
</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
bending: 1,
background color: 'white',
justifyContent: 'center',
align elements: 'center',
padding: 10,
},
header style: {
colour: '#191919',
font size: 25,
textAlign: 'center',
},
image style: {
width: 64,
height: 64,
top margin: 30,
},
itemcontainer: {
width: '100%',
top margin: 30,
align elements: 'center',
},
text style: {
colour: '#191919',
font size: 25,
},
separator style: {
height: 0.5,
width: '60%',
background color: '#C2C2C2',
top margin: 10,
},
});
export default LanguageSelectionScreen;

ContentScreen.js

// Localization example in React Native Multi Language app
// https://aboutreact.com/localization -react-native/
import React, {useEffect} from 'react';
import {SafeAreaView, View, Text, StyleSheet} from 'react-native';
import StringsOfLanguages from './StringsOfLanguages';
const ContentScreen = ({path, navigation}) => {useEffect(() => {
let header = '';
if (path.params.selectedlanguage == 'hello') {
header = 'Selected language Hindi';
} else if (route.params.SelectedLanguage == 'ma') {
header = 'Selected language Marathi';
} else if (route.params.selectedLanguage == 'in') {
header = 'Selected language English';
} else if (route.params.SelectedLanguage == 'fr') {
header = 'Selected language French';
}
navigation.setOptions({title: header});
}, []);
return (
<style SafeAreaView={styles.container}>
<View style={styles.container}>
<text style={styles.text}>
{StringsOfLanguages.first}
</Text>
<text style={styles.text}>
{StringsOfLanguages.second}
</Text>
</View>
<Text
style={{
font size: 18,
textAlign: 'center',
Gray',
}}>
Localization example in React Native (multilingual app)
</Text>
<Text
style={{
font size: 16,
textAlign: 'center',
Gray',
}}>
www.aboutreact.com
</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
bending: 1,
background color: 'white',
align elements: 'center',
padding: 10,
},
text: {
colour: '#191919',
font size: 25,
top margin: 15,
},
});
export default ContentScreen;
StringsOfLanguages.js
// Localization example in React Native Multi Language app
// https://aboutreact.com/localization-in-react-native/
import localized strings from 'react-native-localization';
const StringsOfLanguages = new LocalizedStrings({
hello: {
first: '???? ??? ???',
second: '??? ??? ??? ?',
},
breast: {
first: '?? ??? ???? ?',
second: '?? ??? ??? ?',
},
it is: {
first: 'How are you?',
second: 'I'm fine,
},
it is: {
first: 'comment allez vous',
second: 'you are doing well',
},
});
Export default Strings Languages;

运行 React Native 应用

再次打开终端，然后使用以下命令进入您的项目。

在虚拟 Android 设备或真实的调试设备上运行项目

或在 iOS 模拟器中运行（仅限 macOS）

输出截图

这样您就可以创建一种 React Native 应用（本地化）支持多种语言。

结论

我们轻松地使用国际化库定位了 Expo，并发现了 React Native 应用。通过使用 `expo-localization` 和 `i18n-js` 国际化库，我们使用 `i18n.t()` 函数渲染了这两个应用程序的本地化文本版本。

下一话题React Native Toast

React-Native 本地化

版本 1. x. 注意

它是如何工作的？

设施

手动安装 iOS

手动安装 Android

手动安装 Windows

用途

更新/覆盖区域设置

注意：这将删除所有使用的本地化内容。

TypeScript

API

React Native 中的国际化和本地化

React Native 配置

使用 expo-location

创建 Expo 应用

对于 iOS

安装依赖项

提取和集中应用程序的文本

添加国际化功能

使用 i18n-js 进行应用程序文本本地化

纯 React Native 应用

为多语言应用配置原生 React 本地化

TYPESCRIPT

TYPESCRIPT

技巧和窍门

默认语言

React Native 本地化

如何使用 Localized Strings 组件？

创建一个 React Native 应用。

安装依赖项

CocoaPods 安装

项目结构

创建多语言应用的 so

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React-Native 本地化

版本 1. x. 注意

它是如何工作的？

设施

手动安装 iOS

手动安装 Android

手动安装 Windows

用途

更新/覆盖区域设置

注意：这将删除所有使用的本地化内容。

TypeScript

API

React Native 中的国际化和本地化

React Native 配置

使用 expo-location

创建 Expo 应用

对于 iOS

安装依赖项

提取和集中应用程序的文本

添加国际化功能

使用 i18n-js 进行应用程序文本本地化

纯 React Native 应用

为多语言应用配置原生 React 本地化

TYPESCRIPT

TYPESCRIPT

技巧和窍门

默认语言

React Native 本地化

如何使用 Localized Strings 组件？

创建一个 React Native 应用。

安装依赖项

CocoaPods 安装

项目结构

创建多语言应用的 so

结论

相关帖子

React Native Toast

React Native vs. Ionic

React Native IAP

React Native vs React

React Native Vector Icons

React Native Sound

React Native Modal

React Native vs Flutter

React Native Google Maps

React Native vs. Xamarin

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器