0

我正在尝试创建一个react-native应用程序，我目前处于起点，我无法理解我遇到的问题。

我需要整合i18next翻译。我按照他们的分步教程做到了这一点

我有以下代码

应用程序.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()钩子。

我在这里想念什么？

乐

我错过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文件夹放在项目的根目录下

4

0 回答 0