如何修复导入错误：来自“react-native-web”的“requireNativeComponent”

Posted 2023-03-15

【中文标题】如何修复导入错误：来自“react-native-web”的“requireNativeComponent”

【英文标题】：How to fix import error : 'requireNativeComponent' from 'react-native-web'

【发布时间】：2020-02-12 09:03:50

【问题描述】：

我是 React-native 的初学者，我想在我的应用上展示一个视频。 我现在正在使用 react-native-video。

import React from 'react';
import  StyleSheet, Text, View, requireNativeComponent  from 'react-native';
import Video from 'react-native-video';

export default function App() 
  return (
    <View style=styles.container>
        <Video source=uri:"loading.mp4"
            ref=(ref) => 
              this.player = ref
                                                  // Store reference
            onBuffer=this.onBuffer                // Callback when remote video is buffering
            onError=this.videoError               // Callback when video cannot be loaded
            style=styles.backgroundVideo/> 
    </View>

  );

然后我有这个错误

Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

请告诉我为什么会这样，我该如何解决。

【问题讨论】：

我在尝试使用 react-native-web 和 jsdom testEnvironment 配置 jest 时遇到同样的错误，但我没有使用 <Video />

【参考方案1】：

这是一个老问题，但想回答一下。 上述解决方案均未说明此错误的原因以及如何解决。

我遇到了类似的问题，阅读 Git 上的问题详细信息后，我意识到这是一个由于 lib 版本和 expo 版本不匹配而出现的错误。因此，请养成使用 expo 而不是 npm 或 yarn 安装所有库的习惯。 要修复此错误，请使用 cmd expo install <lib> 安装所有库。

在这种情况下，执行expo install react-native-video 应该可以解决问题。

【讨论】：

非常感谢！我在react-native-web 遇到了这个问题。

它不适用于不是使用expo创建的项目

【参考方案2】：

好几件事：

你不需要从 react-native 导入 requireNativeComponent。

您正在使用功能组件。即不是类组件。功能组件无权访问“this”。

这就是您使用类编写它的方式。 （没有编译测试，但应该有个大概的了解。

import React from 'react';
import  StyleSheet, Text, View from 'react-native';
import Video from 'react-native-video';

export default class App extends React.Component 
    //VIDEO FUNCTIONS
    onLoad(data) 
        console.log('On load fired!');
        this.setState( duration: data.duration );
    

    onProgress(data) 
        this.setState( currentTime: data.currentTime );
    

    onBuffer( isBuffering :  isBuffering: boolean ) 
        this.setState( isBuffering );
    

    videoError(err) 
        console.log("ERROR is " + err)
    

     render() 
         return (
             <View style=styles.container>
                <Video source=uri:"loading.mp4"
                    ref=(ref) => 
                      this.player = ref
                                                          // Store reference
                    onBuffer=this.onBuffer                // Callback when remote video is buffering
                    onError=this.videoError               // Callback when video cannot be loaded
                    style=styles.backgroundVideo 
                /> 
            </View>
        )