React Native - Инвариантное нарушение - интеграция i18next - PullRequest
Новая
       79

React Native - Инвариантное нарушение - интеграция i18next

0 голосов
/ 04 июля 2019

Я пытаюсь создать приложение react-native, сейчас я нахожусь в начальной точке и не могу понять возникшую проблему.

Мне нужно интегрировать i18next для переводов.Я сделал это, следуя их пошаговым инструкциям

У меня есть следующий код

App.js 

import React, { Suspense, Component } from 'react';
import { ScrollView, StyleSheet, Text, View, } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Colors, } from 'react-native/Libraries/NewAppScreen';

const MyComponent = () => {
  const { t, i18n } = useTranslation();

  return <Text>{t('index.welcome')}</Text>;
};

const App = () => {
  return (
    <Suspense fallback="loading">
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={styles.scrollView}>
        <View style={styles.body}>
          <MyComponent />
        </View>
      </ScrollView>
    </Suspense>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  body: {
    backgroundColor: Colors.white,
  },
});

export default App;

Проблема здесь в том, что я получаю Invariant Violation: Text strings must be rendered within a <Text> component ошибку

Если я изменю MyComponent на следующее, приложение работает 

const MyComponent = () => {
  return <Text>Anything</Text>;
};

Так что проблема здесь для меня, кажется,быть useTranslation() крючком.

Что мне здесь не хватает?

LE

Мне не хватало namespace в useTranslation()

Я добавил его useTranslations('translation'), но у меня все та же проблема

Кажется, проблема в пути к файлам перевода, которые не могут быть проанализированы

i18next::backendConnector: loading namespace translation for language en failed failed parsing /translations/en/translation.json to json

В React файлы будут общедоступными через папку public, в React-Native как это следует использовать?Я думаю, что приложение не может получить доступ к этой папке, где папка должна быть помещена?

LE2 

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },

    backend: {
      loadPath: '/translations/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;

И папка translations помещена в кореньпроекта

...