Question

我正在尝试在我的react-native项目中播放youtube视频。我正在使用react-native-youtube模块，并启用了YouTubeDataAPIv3和YouTubeAnalyticsAPI。但是我屏幕变黑了。有时，稍稍延迟后，屏幕将调整大小，在角落留下一个较小的白色正方形，并出现黑色背景。但仍然没有视频。

我的api键有效。我通过邮递员传递基于文本的请求进行了测试。我还确保了api也正确传递给了组件。我尝试了不同的视频/ videoId。我尝试了各种设置，并查看了其他工作代码示例。我目前的理论是，这可能与嵌套视图/容器和设置有关。这些视频位于父屏幕中嵌入的组件中。也许flex：1覆盖了另一个视图？我真的不知道。还有其他人遇到这个问题吗？任何想法如何解决这一问题？

父屏幕：

return (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ flex: 1 }}>
      <LeaderBoard />
      <CurrentVideos />
    </View>
  </SafeAreaView>
);

}

视频屏幕：

return (
  <ScrollView style={{ flex: 1}>
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'pink'
      }}
    >
      <YouTube
        videoId={'BunklIatIK4'}
        play={true}
        apiKey={config.API_KEY}
        controls={1}
        onReady={e => this.setState({ isReady: true })}
        onChangeState={e => this.setState({ status: e.state })}
        onChangeQuality={e => this.setState({ quality: e.quality })}
        onError={e => this.setState({ error: e.error })}
        style={{ alignSelf: 'stretch', height: 300 }}
      />
    </View>
  </ScrollView>
);

Answer 1

想通了！问题是我没有将youtube iframe文件的副本从节点模块手动移动到Xcode中的项目。现在，它很漂亮！

使用react-native-youtube api：无法呈现youtube视频

1 个答案: