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

【问题标题】：How to fix import error : 'requireNativeComponent' from 'react-native-web'如何修复导入错误：来自“react-native-web”的“requireNativeComponent”
【发布时间】：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 />

标签： react-native react-native-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>
        )
    }
}

【讨论】：