react-native-video示例抛出"TypeError:undefined“错误

Question

我是react native的新手。我正在尝试制作一个嵌入了youtube视频的应用程序。我正在尝试这个repo的例子，但它在我的项目中崩溃了。

这是我的完整代码。崩溃在它们被抛出的地方被注释。我不明白我做错了什么。

我正在使用webstorm，我非常确定我已经安装了这个包，并使用thoose命令将其链接起来：

npm安装--保存react-native-video

react-本地链接react-native-video

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.player=this.player.bind(this)来bind它。

有关更多信息，请查看here