Question

我是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'.

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

Answer 1

这是一个古老的问题，但想回答。上面的解决方案均未说明为什么会出现此错误以及如何解决。

我遇到了类似的问题，在阅读有关Git的问题详细信息时，我意识到它的错误是由于lib版本和expo版本不匹配而引起的。因此，可以使用expo而不是npm或yarn来安装所有库。要修复此错误，请使用cmd expo install <lib>安装所有库。

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

Answer 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>
        )
    }
}

Answer 3

我找到了解决方案，因为我对最后一个版本做了反应。节点和反应之间的版本问题。谢谢

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

3 个答案: