Question

我对React Native非常陌生。我正在尝试制作一个嵌入了youtube视频的应用。我正在尝试此仓库的示例，但是它在我的项目中崩溃了。

这是我的完整代码。崩溃会在抛出的地方进行注释。我不明白我在做什么错。

我正在使用webstorm，并且可以确定已经安装了该软件包并使用thoose命令将其链接：

npm install-保存react-native-video

react-native链接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”将指代明确的值，如果尚未明确设置“此”，则“此” 将是未定义的。

因此，您必须使用bind this.player=this.player.bind(this)。

有关更多信息，请查看here

react-native-video示例抛出“ TypeError：undefined”错误

1 个答案: