Статьи

Интернационализация и локализация в вашем приложении React Native

Декабрь 2, 2017

Если вы не отставали от моего блога и учебных пособий, вы будете знать, что я написал немало постов по  Ionic Framework . В последнее время я много слышал о React Native,  поэтому решил, что пришло время попробовать  .

В мире насчитывается  6500 языков  и  примерно семь миллиардов человек  . Скорее всего, ваш родной язык известен только небольшой части населения мира. Вы можете ускорить загрузку своего приложения и общую оптимизацию App Store (ASO), применив большее количество языков.

В прошлом году я провел урок по  локализации (l10n) и интернационализации (i18n) в приложениях Ionic Framework для  Android и iOS. На этот раз я собираюсь повторить то же самое, но в приложении React Native для iOS.

Если вы впервые рассматриваете React Native, вам следует помнить, что на данный момент он совместим только с iOS. Я верю, что Android появится в будущем, но пока нет. Это означает, что вам понадобится Mac для любой разработки.

Давайте начнем этот урок с первого создания нового проекта React Native. Предполагая, что на вашем компьютере установлен React Native, запустите следующее из приложения Mac Terminal:

react-native init ReactProject
cd ReactProject

В этом проекте будет использован плагин React Native response  -native-i18n  Александра Зайцева для любого перевода. С проектом в качестве текущего рабочего каталога в вашем Терминале выполните следующую команду:

npm install react-native-i18n --save

Теперь зависимости находятся в каталоге вашего проекта, но их также необходимо добавить в проект Xcode.

Откройте  ReactProject.xcodeproj,  найденный в корне вашего проекта. Теперь щелкните правой кнопкой мыши по   каталогу библиотек, найденному в дереве проекта XCode, и выберите «  Добавить файлы в« ReactProject »…» . Вы хотите добавить  RNI18n.xcodeproj,  найденный в каталоге вашего проекта  node_modules / реагировать-native-i18n  .

Затем добавьте  libRNI18n.a  через раздел «  Связать двоичные файлы с библиотеками  »  фаз сборки  в Xcode.

Плагин был добавлен в ваш проект, но не в код вашего проекта.

Откройте  файл index.ios.js,  найденный в корне вашего проекта, и включите следующую строку:

var I18n = require('react-native-i18n');

Многое из того, что будет дальше, исходит из документации плагина.

Согласно документации рекомендуется использовать языковые запасные варианты. Например, вы можете добавить переводы для  en_US  и  en_GB , но с включенными запасными вариантами вы можете  вместо этого иметь более общий перевод для  en . Этот запасной вариант можно включить, добавив следующее:

I18n.fallbacks = true;

Теперь давайте посмотрим, что нужно для добавления некоторых переводов. По сути, мы будем просто создавать объект с родительскими свойствами для любой локали, которую мы хотим использовать. Например:

I18n.translations = {
    en: {
        greeting: "Hello",
        goodbye: "Bye"
    },
    fr: {
        greeting: "Bonjour",
        goodbye: "Au Revoir"
    },
    es: {
        greeting: "Hola",
        goodbye: "Adios"
    }
}

В приведенном выше объекте у нас есть три разных языка, все из которых используют запасное значение. У нас есть приветственное и интересное слово для английского, испанского и французского языков. Эти переведенные переменные могут использоваться следующим образом:

<Text>{I18n.t("greeting")}</Text>
<Text>{I18n.t("goodbye")}</Text>

Чтобы лучше понять все это вместе, ваш полный   файл index.ios.js может выглядеть следующим образом:

'use strict';

var React = require('react-native');
var I18n = require('react-native-i18n');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var ReactProject = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    {I18n.t("greeting")}
                </Text>
                <Text style={styles.goodbye}>
                    {I18n.t("goodbye")}
                </Text>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    goodbye: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});


I18n.fallbacks = true;

I18n.translations = {
    en: {
        greeting: "Hello",
        goodbye: "Bye"
    },
    fr: {
        greeting: "Bonjour",
        goodbye: "Au Revoir"
    },
    es: {
        greeting: "Hola",
        goodbye: "Adios"
    }
}

AppRegistry.registerComponent('ReactProject', () => ReactProject);

Я пошел вперед и выделил важные строки кода.

Вывод

Как и в случае Angular Translate для Ionic Framework, мы можем добавить функции локализации и интернационализации в наше приложение React Native. Это потрясающий способ повысить оптимизацию вашего магазина приложений (ASO), поскольку теперь ваше приложение будет охватывать больше аудитории.

Видео-версию этой статьи можно увидеть ниже.

43
Share: