Пример реагирования на видео генерирует ошибку «Ошибка ввода: неопределенная»

Question

Я очень новый с реагировать на родной. Я пытаюсь создать приложение, в которое встроено видео на YouTube. Я пробую пример этого репозитория, но он не работает в моем проекте.

Вот мой полный код. Аварии комментируются там, где их бросают. Я не понимаю, что я делаю не так.

Я использую веб-шторм и уверен, что установил пакет и связал его с помощью команд thoose:

npm установить --save реагировать-нативное видео

реагировать-нативная ссылка реагировать-нативное видео

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Video from 'react-native-video';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.body}>
            <View>
              <Video source={{uri: "https://www.youtube.com/watch?v=83mkGuGLNZg"}}
                 ref={(ref) => {
                   this.player = ref //Crash with TypeError:undefined is not an object
                 }}                                      // Store reference
                 onBuffer={this.onBuffer}                //Crash with TypeError:undefined is not an object
                 onError={this.videoError}               //Crash with TypeError:undefined is not an object
                 style={styles.backgroundVideo}
              />
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

export default App;

Answer 1

Проблема в вашем this утверждении. Это относится к функции, в которой вы находитесь.

При использовании строгого режима «this» в функции будет ссылаться на ее явное значение, а если «this» не было явно установлено, то «this» будет неопределенным.

Так что вам нужно bind это с this.player=this.player.bind(this).

Для получения дополнительной информации вы можете посмотреть здесь