Question

使用react版本16.0.0与react-native版本0.49.1引发红屏错误＆＃34;尝试注册两个具有相同名称ProgressBarAndroid＆＃34;的视图。删除所有导入和ProgressBarAndroid实例会导致程序运行良好。降级到反应原生版本0.48.4同样有效。如何将ProgressBarAndroid与最新的React Native版本一起使用？

Answer 1

从版本0.49开始的React Native会在尝试多次为同一组件调用requireNativeComponent()时触发此错误。即使它们是从不同的模块调用的。

我在自定义视图MyCustomView方面遇到了类似问题。所以我把它包装在一个模块中：

// MyCustomView.js
import {requireNativeComponent} from 'react-native'
const MyCustomView = requireNativeComponent('MyCustomView', null)
export default MyCustomView

虽然可能不是您的确切情况，但根本原因是相同的。

Answer 2

import ReactNative  from 'react-native';

const description = Object.getOwnPropertyDescriptor( ReactNative, 'requireNativeComponent' )

if ( !description.writable ) {
  Object.defineProperty( ReactNative, 'requireNativeComponent', {
    value: (function () {
      const cache = {}
      const _requireNativeComponent = ReactNative.requireNativeComponent

      return function requireNativeComponent( nativeComponent ) {

        if ( !cache[ nativeComponent ] ) {
          cache[ nativeComponent ] = _requireNativeComponent( nativeComponent )
        }

        return cache[ nativeComponent ]
      }
    })(), writable: true
  } )
}

Answer 3

我在开发过程中的热重载过程中遇到过这种情况。导致该问题的原因如下：然而 JS 被重新加载，本机代码仍然保持它以前保持的相同引用。每当 JS 使用相同的 requireNativeComponent 运行 viewName 时，它都会抛出异常，因为给定 viewName 的先前引用仍然存在。 Here 是 requireNativeComponent 的源文件，里面明确说明应该在 React Native 端进行 memozied，并且只初始化一次。因此，@Teivaz 的回答是令人满意的，不需要进一步的黑客攻击（如@蒋宏伟的回答）。如果您的代码结构良好，您就不必使用任何手动缓存，因为您的导入结构会为您解决这个问题。 :)

试图注册两个具有相同名称ProgressBarAndroid的视图

3 个答案: