Я пытаюсь заставить видео на YouTube играть в моем проекте. Я использую модульact-native-youtube и включил YouTubeDataAPIv3 и YouTubeAnalyticsAPI. Но я получаю пустой экран. Иногда, после небольшой задержки, размер экрана изменяется, оставляя меньший белый квадрат в углу и черный фон. Но до сих пор нет видео.
Мой ключ API работает. Я проверил это, передав текстовый запрос через почтальона. Я также убедился, что API также правильно передается компоненту. Я пробовал разные видео / видео идентификаторы. Я поиграл с различными настройками и посмотрел другие примеры работающего кода. Моя текущая теория заключается в том, что это может иметь отношение к вложенным представлениям / контейнерам и настройкам. Видео находятся в компоненте, который встроен в родительский экран. Может быть, 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>
);