如何在 React Native 中填充 JavaScript `Intl` API？

问题描述 投票：0回答：1

已关闭：这个问题是因为我这边的一个错误。请参阅答案以获取更多信息。

我正在 Android 上使用示例 React Native 应用程序（特别是：Zulip Mobile）测试自定义 JavaScript 运行时。运行时支持大多数现代 JavaScript 功能，但缺乏对 

Intl
.

的支持

但是，RN 应用程序通过 

Intl
 的 
react-intl 类型使用 
IntlProvider
（参见此处）。要继续使用此应用程序进行测试，我需要自己对 API 进行填充，但我的所有尝试都没有成功地将填充的 
Intl
 放入全局变量中。


import { IntlProvider, IntlContext } from 'react-intl';

// ...

export default function TranslationProvider(props: Props): Node {
  const { children } = props;
  const language = useGlobalSelector(state => getGlobalSettings(state).language);

  return (
    <IntlProvider locale={language} textComponent={Text} messages={messages[language]}>
      <TranslationContextTranslator>{children}</TranslationContextTranslator>
    </IntlProvider>
  );
}



错误堆栈跟踪是：


ReferenceError: 'Intl' is not defined

Component Stack:

    in IntlProvider
    in Unknown
    in RCTView
    in Unknown
    in L
    in Connect(L)
    in Unknown
    in RNCSafeAreaProvider
    in Unknown
    in Unknown
    in n
    in Unknown
    in b
    in O
    in Unknown
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in b

Call Stack:

    at <anonymous> (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at o (index.android.bundle)
    at jt (index.android.bundle)
    at ul (index.android.bundle)
    at ql (index.android.bundle)
    at Fa (index.android.bundle)
    at Ua (index.android.bundle)
    at La (index.android.bundle)
    at Ea (index.android.bundle)
    at ft (index.android.bundle)
    at Te (index.android.bundle)
    at Pe (index.android.bundle)
    at notify (index.android.bundle)
    at notifyNestedSubs (index.android.bundle)
    at f (index.android.bundle)
    at b (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at call (native)
    at v (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at call (native)
    at v (index.android.bundle)
    at o (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at u (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at apply (native)
    at <anonymous> (index.android.bundle)
    at k (index.android.bundle)
    at w (index.android.bundle)
    at callReactNativeMicrotasks (index.android.bundle)
    at value (index.android.bundle)
    at <anonymous> (index.android.bundle)
    at value (index.android.bundle)
    at value (index.android.bundle)
    at value (index.android.bundle)



我尝试使用 NPM 中的 
intl
 和 
formatjs
 包来填充 Intl API。都没有成功，错误和上面一样。


我以前没有任何编写 React Native 应用程序的经验（我正在测试运行时的能力）。我的填充方法可能是完全错误的——如果是这样的话，我希望得到善意的指出。


// index.js

/* @flow strict-local */
// React Navigation requires this react-native-gesture-handler import,
// as the very first import of this entry-point file.  See our #5373.
import 'react-native-gesture-handler';
import IntlPolyfill from 'intl'; // <-
import { AppRegistry } from 'react-native';
import ZulipMobile from './src/ZulipMobile';

if (!globalThis.Intl) {
    globalThis.Intl = IntlPolyfill;
}

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



// index.js

/* @flow strict-local */
// React Navigation requires this react-native-gesture-handler import,
// as the very first import of this entry-point file.  See our #5373.
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import ZulipMobile from './src/ZulipMobile';

// polyfills
import '@formatjs/intl-getcanonicallocales/polyfill';
import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-displaynames/polyfill';
import '@formatjs/intl-displaynames/locale-data/en';

if (!global.Intl) {
  throw new Error('Intl is missing???');
}

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



我也查看并尝试了这些问题下的答案，但也没有成功：


    

    
    javascript
    
    reactjs
    
    react-native
    
    polyfills
    
    zulip
    
    
1个回答

    

      
      
      

        

          

            

              
0
投票

              
            

          

        

        


这是我这边的一个错误。


具体来说，由于某种原因，我在编辑时脚本根本没有更新。


为了使用 Android Studio 构建和分析应用程序，我必须手动捆绑脚本，然后将其放入 Android 应用程序资产中。虽然构建脚本会在构建发布时再次运行捆绑器，但结果无法被 Android 应用程序资产识别，我需要手动构建它。


npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output android/app/src/main/assets/index.android.bundle \
  --assets-dest test-assets



但是，当我尝试修复错误时，我完全忘记了脚本就在那里的事实。发现捆绑的脚本没有更新，我只需要在每个构建上手动运行捆绑器。




从填充
Intl
开始，这是我使用的代码（和包）：


// index.js

import '@formatjs/intl-getcanonicallocales/polyfill';
import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-numberformat/polyfill';
import '@formatjs/intl-numberformat/locale-data/en';
import '@formatjs/intl-datetimeformat/polyfill';
import '@formatjs/intl-datetimeformat/locale-data/en';
import '@formatjs/intl-pluralrules/polyfill';
import '@formatjs/intl-pluralrules/locale-data/en';
import '@formatjs/intl-relativetimeformat/polyfill';
import '@formatjs/intl-relativetimeformat/locale-data/en';
import '@formatjs/intl-displaynames/polyfill';


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.