Как исправить ошибку импорта: 'requireNativeComponent' из'act-native-web '

Question

Я новичок в React-native и хочу показать видео в своем приложении. Я сейчас использую реагирующее видео.

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

Я нашел решение, потому что реагировал на какую-то последнюю версию. Проблема версии между узлом и реакцией. Спасибо

Answer 2

Хорошо, несколько вещей:

1. Вам не нужно импортировать requireNativeComponent из реактивного-нативного.

2. Вы используете функциональный компонент , Т.е. не компонент класса. Функциональные компоненты не имеют доступа к «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>
)
}
}