Question

我正在从后端获取语言信息。我想请求获取语言信息，然后向i18next发出信号，它可以显示翻译。
当前，它会显示默认语言翻译一秒钟，直到请求完成，然后我致电import 'package:corona_test/screens/user_state.dart'; import 'package:flutter/material.dart'; import 'package:corona_test/app_locations.dart'; import 'package:url_launcher/url_launcher.dart'; class DrawerLeft extends StatefulWidget { DrawerLeft({Key key}) : super(key: key); @override _DrawerLeftState createState() => _DrawerLeftState(); } class _DrawerLeftState extends State<DrawerLeft> { final int nrOfSettingsBullets = 8; int screenSizeType = 0; @override Widget build(BuildContext context) { // first define settings titles (order matters) List<String> settings = []; settings .add(AppLocalizations.of(context).translate('My Personal Situation')); settings.add( 'E-Mail'); // AppLocalizations.of(context).translate('Revert to Original Icons')); settings.add( 'Test Dialog'); // AppLocalizations.of(context).translate('App help videos 1')); settings.add( 't.b.d'); // AppLocalizations.of(context).translate('Facebook Like')); settings.add( 't.b.d'); // AppLocalizations.of(context).translate('Our website')); settings .add('t.b.d'); // AppLocalizations.of(context).translate('Contact')); settings .add('t.b.d'); // AppLocalizations.of(context).translate('Rate App')); settings .add('t.b.d'); //AppLocalizations.of(context).translate('Impressum')); final double screenHeight = MediaQuery.of(context).size.longestSide; if (screenHeight >= 1000) { screenSizeType = 8; } else if (screenHeight >= 896) { // iPhone XSmax/XR screenSizeType = 7; } else if (screenHeight >= 812) { // iPhone XS screenSizeType = 6; } else if (screenHeight >= 800) { // Android Samsung Galaxy S7 5.1" screenSizeType = 5; } else if (screenHeight >= 736) { // iPhone 6S Plus screenSizeType = 4; } else if (screenHeight >= 690) { // Android Samsung Galaxy S9 5.8" screenSizeType = 3; } else if (screenHeight >= 683) { // Android Nexus 5X, Pixel 2 screenSizeType = 2; } else if (screenHeight >= 667) { // iPhone 6S screenSizeType = 1; } else if (screenHeight >= 568) { // iPhone 5S screenSizeType = 0; } else { screenSizeType = 0; } return ListView( physics: const NeverScrollableScrollPhysics(), padding: EdgeInsets.zero, children: <Widget>[ Container( height: _drawerHeaderHeight() ?? 80.0, child: DrawerHeader( child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ SizedBox( width: _spacerXTitle() ?? 12.0, ), Text(AppLocalizations.of(context).translate('Settings'), style: TextStyle( fontSize: 21.0, color: Colors.white, fontWeight: FontWeight.w600), ), ], ), decoration: BoxDecoration( color: Colors.blue, ), ), ), ListView.builder( physics: const NeverScrollableScrollPhysics(), shrinkWrap: true, // this way you don't need Expanded() itemCount: this.nrOfSettingsBullets, itemExtent: _tileHeightSettings() ?? 60.0, itemBuilder: (BuildContext ctxt, int index) { return Container( padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0), height: _tileHeightSettings() ?? 60.0, child: ListTile( title: Container( alignment: AlignmentDirectional.centerStart, height: _itemHeightSetting() ?? 50.0, decoration: BoxDecoration( color: Color.fromRGBO(0x00, 0x99, 0xCC, 0.2), borderRadius: BorderRadius.all(Radius.circular(14.0)), border: Border.all( color: Color.fromRGBO(0x2d, 0x32, 0x7d, 0.2)), ), child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox( width: 12.0, ), Text( settings[index], style: TextStyle( fontSize: 20.0, color: Color.fromRGBO(0x2d, 0x32, 0x7d, 1.0), fontWeight: FontWeight.w600), ), ], ), ), onTap: () async { switch (index) { case 0: Navigator.of(context).pop(); _navigateToUserState(context); break; case 1: _sendMail(); break; case 2: _showDialog( 'Wollen Sie wirklich TEST TEST ?', 'Alle Einstellungen werden TEST TEST', // AppLocalizations.of(context).translate( // 'Do you really want to revert to Original Icons ?'), // AppLocalizations.of(context).translate( // 'All privately added Image Icons will be deleted.'), ); break; case 3: //_launchFacebookURL(); break; case 4: //_launchChunderURL(); break; case 5: break; case 6: //_sendReview(); break; case 7: break; default: break; } }, ), ); }, ), SizedBox( height: _aboveCancelSpaceLeft() ?? 16.0, ), MaterialButton( height: 70.0, minWidth: 70.0, color: Colors.blue, textColor: Colors.white, child: Text( 'Cancel', // AppLocalizations.of(context).translate('Cancel'), style: TextStyle( fontSize: 21.0, color: Colors.white, fontWeight: FontWeight.w600), ), onPressed: () { Navigator.of(context).pop(); }, splashColor: Color.fromRGBO(0x00, 0x99, 0xCC, 1.0), ) ], ); } // user defined function void _showDialog(String title, String content) { // flutter defined function showDialog( context: context, builder: (BuildContext context) { // return object of type Dialog return AlertDialog( title: Text(title), content: Text(content), actions: <Widget>[ FlatButton( child: Text( 'No', //AppLocalizations.of(context).translate('No'), style: TextStyle( fontSize: 21.0, color: Color.fromRGBO(0x00, 0x99, 0xCC, 1.0), fontWeight: FontWeight.w600), ), onPressed: () { Navigator.of(context).pop(); }, ), FlatButton( child: Text( 'Yes', // AppLocalizations.of(context).translate('Yes'), style: TextStyle( fontSize: 21.0, color: Color.fromRGBO(0x00, 0x99, 0xCC, 1.0), fontWeight: FontWeight.w600), ), onPressed: () async { // revert to Original Icons // Directory directory = await LocationiKK.dbDirectory(); // DBHelperLocations databaseHelperLocations = // DBHelperLocations(); // databaseHelperLocations.resetLocationDB(directory); // await _loadLocationsFromSQLDBIntoContainer(); Future.delayed( const Duration(milliseconds: 800), () { Navigator.of(context).pop(); }, ); }, ), ], ); }, ); } double _tileHeightSettings() { switch (screenSizeType) { case 8: return 62.0; break; case 7: return 62.0; break; case 6: return 57.0; break; case 5: return 57.0; break; case 4: return 57.0; break; case 3: return 57.0; break; case 2: return 56.0; break; case 1: return 53.0; break; case 0: return 46.0; break; default: return 55.0; break; } } double _drawerHeaderHeight() { switch (screenSizeType) { case 8: return 80.0; break; case 7: return 80.0; break; case 6: return 80.0; break; case 5: return 80.0; break; case 4: return 80.0; break; case 3: return 80.0; break; case 2: return 70.0; break; case 1: return 80.0; break; case 0: return 70.0; break; default: return 105.0; break; } } double _itemHeightSetting() { switch (screenSizeType) { case 8: return 52.0; break; case 7: return 52.0; break; case 6: return 50.0; break; case 5: return 50.0; break; case 4: return 50.0; break; case 3: return 50.0; break; case 2: return 48.0; break; case 1: return 46.0; break; case 0: return 40.0; break; default: return 50.0; break; } } double _aboveCancelSpaceLeft() { switch (screenSizeType) { case 8: return 16.0; break; case 7: return 16.0; break; case 6: return 16.0; break; case 5: return 16.0; break; case 4: return 16.0; break; case 3: return 16.0; break; case 2: return 5.0; break; case 1: return 16.0; break; case 0: return 16.0; break; default: return 16.0; break; } } double _spacerXTitle() { switch (screenSizeType) { case 8: return 12.0; break; case 7: return 12.0; break; case 6: return 12.0; break; case 5: return 12.0; break; case 4: return 12.0; break; case 3: return 12.0; break; case 2: return 12.0; break; case 1: return 12.0; break; case 0: return 12.0; break; default: return 22.0; break; } } _sendMail() async { const url = 'mailto:corona@ideenkaffee.ch?subject=Feedback%20Corona%20Control&body='; if (await canLaunch(url)) { await launch(url); } else { throw 'Could not launch $url'; } } Future<String> _navigateToUserState(BuildContext context) async { return await Navigator.push( context, MaterialPageRoute(builder: (context) => UserState())); } }。

我将如何实现？

这是我的配置：

i18next.changeLanguage()

我正在使用useTranslation钩子来获取t函数：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import XHR from "i18next-xhr-backend";

 i18n
  .use(initReactI18next)
  .use(XHR)
  .init({
    fallbackLng: "en-GB",
    keySeparator: false,
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath: "/locales/{{lng}}.json"
    }
  });

Answer 1

如果有react-i18next，请确保启用useSuspense或在HOC中处理就绪状态，或者自己上钩。

您需要使用Suspense组件包装根组件，以确定在翻译加载时应呈现的内容。

import React, { Suspense } from 'react';
import RealApp from './App';
import Loading from './Loading';
import { I18nextProvider } from 'react-i18next';
import App from './App';

function Root(props) {
  return (
    <Suspense fallback={<Loading />}>
      <I18nextProvider i18n={i18n}>
        <Root />
      </I18nextProvider>
    </Suspense>
  );
}

更多info。

React i18next-在请求完成之前不显示翻译

1 个答案: