Блог

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

 render(){
  var idVideo = this.props.navigation.state.params.YTID;
  const YOUR_API_KEY = "paste yout api key here";
 return (


   <View style={Styles.container}>
   <YouTube
      ref={component => {
       this._youTubeRef = component;
      }}
      play={this.state.isPlaying}
      fullscreen={this.state.fullscreen}
      loop={true}
      apiKey="YOUR_API_KEY"
      videoId={idVideo}
      showinfo={true}
      controls={1}
      modestbranding={true}
      onChangeState={e => this.setState({ status: e.state})}
      onChangeQuality={e => this.setState({ quality: e.quality })}
      onError={e => console.warn(JSON.stringify(e))}
      style={[
        Styles.YTPlayer,
        {height: this.state.height},
      ]}
      onReady={e => this.setState({ height: 300 })}
    />


     <View style={[Styles.listContainer, Styles.radius]}>

       <LinearGradient
       colors={[Colors.mainYellowOld, Colors.mainYellow2]}
       style={[Styles.titleContainer]}>
         <View style={[Styles.icAndText]}>
          <Text style={Styles.textTitle}>{this.state.videoInfos.Titre}</Text>

          <View
          style={Styles.logoContainer}>
              <Image
              source={Images.logo}
              style={Styles.imageStyle}
              />
          </View>
        </View>

       </LinearGradient>
      <View style={[Styles.bodyContainer, Styles.radius]}>
          <View style={Styles.containerDesc}>
            <View style={Styles.adressContainer}>
              <Text style={Styles.titleDesc}>Desc box</Text>
              <IconE name="info-with-circle" size={hp('2.5%')} color= {Colors.mainYellow} style={Styles.icDescContainer}/>
            </View>
            <Text style={Styles.descContent}>{this.state.videoInfos.Description}</Text>
          </View>
          <View style={Styles.imageBottomContainer}>
            <Image source={Images.arcolLogo}
              style={Styles.imageBottomStyle}
              resizeMode={'contain'}
            />
          </View>

      </View>
     </View>

   </View>

 );
 }
  

ошибка onError выдает мне: {«target»: 983,»error»:»UNAUTHORIZED_OVERLAY»}

 ScrollViewStickyHeader.js:10 {"target":983,"error":"UNAUTHORIZED_OVERLAY"}
console.warn    @   ScrollViewStickyHeader.js:10
onError @   Url.js:47
YouTube._this._onError  @   default.js:35
invokeGuardedCallbackImpl   @   TextInput.js:1183
invokeGuardedCallback   @   TextInput.js:1290
invokeGuardedCallbackAndCatchFirstError @   TextInput.js:1280
executeDispatch @   ToolbarAndroid.android.js:228
executeDispatchesInOrder    @   ToolbarAndroid.android.js:249
executeDispatchesAndRelease @   Touchable.js:224
executeDispatchesAndReleaseTopLevel @   Touchable.js:233
forEachAccumulated  @   Touchable.js:216
runEventsInBatch    @   Touchable.js:397
runExtractedEventsInBatch   @   Touchable.js:402
(anonymous) @   TouchableWithoutFeedback.js:221
batchedUpdates$1    @   react-is.development.js:227
batchedUpdates  @   TouchableWithoutFeedback.js:47
_receiveRootNodeIDEvent @   TouchableWithoutFeedback.js:84
receiveEvent    @   TouchableWithoutFeedback.js:84
__callFunction  @   ReactNativeART.js:207
(anonymous) @   ReactNativeART.js:10
__guard @   ReactNativeART.js:154
callFunctionReturnFlushedQueue  @   ReactNativeART.js:10
(anonymous) @   debuggerWorker.js:80
  

Я нашел много этой проблемы на форумах, но без какого-либо решения

Я использую последнюю версию "react-native-youtube": "^2.0.1" и "react-native": "0.59.1"

Я сам нашел решение, я изолировал страницу, на которой есть react-native-youtube в a stacknavigator , причиной было drawer то, что было выше youtube

это действительно проблема перекрытия, правильная настройка высоты выполнит эту работу.

 style={{
       alignSelf: 'stretch',
       height: dimensions.vh * 25,
       backgroundColor: 'black',
       }}
                             
  

Я перепробовал много вещей, и в конце, нажав и попробовав, я смог увидеть, что это из-за высоты, которая перекрывалась с нижней стороны, а затем я сделал ее зависящей от высоты устройства, чтобы она всегда подходила для каждого устройства