javascript - 由于 Invariant Violaton，Expo Android Emulator 未加载：[React Intl] `Intl` API 必须在运行时可用，并且似乎不可用

Question

我目前正在做一个小型的 react-native 项目，然后我开始收到下面的错误。

Invariant Violation: [React Intl] The `Intl` APIs must be available in the runtime, and do not appear to be built-in. An `Intl` polyfill should be loaded.
See: http://formatjs.io/guides/runtime-environments/

This error is located at:
    in IntlProvider (at root.js:71)
    in Root (at App.js:10)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

这是我的第一个主要的 React Native 项目——我还没有经历过开发中可能出错的所有事情。我不知道为什么会发生这个错误，我需要帮助来修复它。你如何让 React Intl 在运行时可用？

我将添加有问题的文件。root.js & App.js 供审查。

根.js

import React from 'react';
import { Provider } from 'react-redux';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { DangerZone } from 'expo';
import { IntlProvider, addLocaleData, injectIntl } from 'react-intl';
import { createBottomTabNavigator, createSwitchNavigator } from 'react-navigation';
import { PersistGate } from 'redux-persist/integration/react';
import AuthLoadingPage from './containers/authLoading';
import LoginPage from './containers/login';
import SignupPage from './containers/signup';
import HomePage from './containers/home';
import NotFoundPage from './containers/notFound';
import configureStore from './configureStore';
import en from 'react-intl/locale-data/en';
import es from 'react-intl/locale-data/es';
import localeData from './build/data.json';


const { Localization } = DangerZone;

const { persistor, store } = configureStore();

const AuthTab = createBottomTabNavigator({
    login: { screen: LoginPage },
    signup: { screen: SignupPage },
},{ 
  navigationOptions: {
    tabBarVisible: false,
  },
  lazyLoad: true,
});

const MainNavigator = createSwitchNavigator({
  authLoading: AuthLoadingPage,
  main: { screen: HomePage},
  auth: AuthTab,
},{
  initialRouteName: 'authLoading',
});

class Root extends React.Component {
  constructor (props) {
      super(props)

      this.state = {
        locale: 'en',
        localeData: localeData,
        messages: localeData['en'],
      }
      // Import locale data in default environment
      addLocaleData([...en, ...es]);
    
      // TODO: Add custom localization messages you can export them from separate files.
      // example https://github.com/yahoo/react-intl/wiki/API#definemessages
      // and use the id in https://github.com/yahoo/react-intl/wiki/Components#formattedmessage

      this.initLocale();
  }

  async initLocale() {
      // Read device locale and update the intl provider via state.
      var locale = await Localization.getCurrentLocaleAsync();
      this.setState({
          locale,
          messages: this.state.localeData[locale],
      });
  }

  render() {
    return (
      <IntlProvider
        locale={this.state.locale}
        key={this.state.locale}
        messages={this.state.messages}
        textComponent={Text}
      >
      <Provider store={store}>
        <PersistGate
          loading={<NotFoundPage />}
          onBeforeLift={() => {}}
          persistor={persistor}
        >
          <MainNavigator />
        </PersistGate>
      </Provider>
      </IntlProvider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Root;

应用程序.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Root from './root';
import FlashMessage, {showMessage, hideMessage} from 'react-native-flash-message'

export default class App extends React.Component {
  render() {
    return (
      <>
      <Root />
      <FlashMessage position="top"/>
      </>
    );
  }
}

标签： javascriptandroidiosreactjsreact-native