使用react-native-youtube

Question

我想使用react-native-youtube显示嵌入的视频。我已经检索了要显示的视频的数据，但无法显示播放器。我的TouchableHighlight中有一个视频列表，我想在<View>中显示200高度的视频关联。这是我尝试的代码：

class Horoscope extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedIndex:0,
      tabList:[
        {id:0,label:'Bélier', active:require('../Images/couleurs/icons8-belier-100.png'), inactive:require('../Images/gris/beliergris.png')},
        {id:1,label:'Taureau', active:require('../Images/couleurs/icons8-taureau-96.png'), inactive:require('../Images/gris/taureaugris.png')},
        {id:2,label:'Gémeaux', active:require('../Images/couleurs/icons8-gemeaux-96.png'), inactive:require('../Images/gris/gemeauxgris.png')},
        {id:3,label:'Cancer', active:require('../Images/couleurs/icons8-cancer-96.png'), inactive:require('../Images/gris/cancergris.png')},
        {id:4,label:'  Lion', active:require('../Images/couleurs/icons8-lion-96.png'), inactive:require('../Images/gris/liongris.png')},
        {id:5,label:'Vierge', active:require('../Images/couleurs/icons8-vierge-96.png'), inactive:require('../Images/gris/viergegris.png')},
        {id:6,label:'Balance', active:require('../Images/couleurs/icons8-balance-96.png'), inactive:require('../Images/gris/balancegris.png')},
        {id:7,label:'Scorpion', active:require('../Images/couleurs/icons8-scorpion-96.png'), inactive:require('../Images/gris/scorpiongris.png')},
        {id:8,label:'Sagittaire', active:require('../Images/couleurs/icons8-sagittaire-96.png'), inactive:require('../Images/gris/sagittairegris.png')},
        {id:9,label:'Verseau', active:require('../Images/couleurs/icons8-verseau-96.png'), inactive:require('../Images/gris/verseaugris.png')},
        {id:10,label:'Capricorne', active:require('../Images/couleurs/icons8-capricorne-96.png'), inactive:require('../Images/gris/capricornegris.png')},
        {id:11,label:'Poissons', active:require('../Images/couleurs/icons8-poissons-96.png'), inactive:require('../Images/gris/poissonsgris.png')}        
      ],
      textStyle: {
        color: 'green',
      },
      listvideos:"",
      dataVideos:[],
      isReady: false,
      status: null,
      quality: null,
      error: null,
      isPlaying: true,
      isLooping: true,
      duration: 0,
      currentTime: 0,
      fullscreen: false,
      playerWidth: Dimensions.get('window').width,
      containerMounted: false,
      containerWidth: null,
    }
  }

  componentDidMount(){
    {this._fetchPlaylist()}
  }

_fetchPlaylist(){
    if(this.state.selectedIndex === 0) {
      return(
      fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&maxResults=${results}&playlistId=PLSlVQ0kIy6qx-f5O3J3GwIEOO5Y52z43-&key=${apiKey}`)
      .then(res => res.json())
      .then(res => {
        const videoId = []
        res.items.forEach(item => {
          videoId.push(item)
        })
        this.setState({
          dataVideos:videoId
        })
      })
      .catch(error => {
        console.error(error)
      })
      )
    }
}

 youtubeDisplay (videoId){
    {this.state.containerMounted && (
      <YouTube
        ref={component => {
          this._youTubeRef = component;
        }}
        apiKey={this.apiKey}
        videoId= {videoId}
        play={this.state.isPlaying}
        loop={this.state.isLooping}
        fullscreen={this.state.fullscreen}
        controls={1}
        style={[
          { height: PixelRatio.roundToNearestPixel(this.state.containerWidth / (16 / 9)) },
          styles.player,
        ]}
        onError={e => this.setState({ error: e.error })}
        onReady={e => this.setState({ isReady: true })}
        onChangeState={e => this.setState({ status: e.state })}
        onChangeQuality={e => this.setState({ quality: e.quality })}
        onChangeFullscreen={e => this.setState({ fullscreen: e.isFullscreen })}
        onProgress={e => this.setState({ duration: e.duration, currentTime: e.currentTime })}
      />
    )}
  }

   render() {
    return (
      <View style={styles.main_container}>
        <View style={{flexDirection:'row', justifyContent: 'space-around', marginVertical: 8 }}>
          <MyButton2 style={{}} text={"Voyance privée"} text2={"ouvert 24h/24"} text3={"01 44 01 77 01"} icone='icone-transfert' onPress={() => { Linking.openURL('tel:0144017701'); }}/>
          <MyButton2 text={"Voyance sans CB"} text2={"ouvert 24h/24"} text3={"32 32"} icone='icone-sonnerie' onPress={() => { Linking.openURL('tel:3232'); }}/>
        </View>

        <ScrollView>
          <View style = {{height: 'auto', display: 'flex', flexDirection: 'row', flexWrap: 'wrap',  justifyContent: 'space-between'}}>
          {
                this.state.tabList.map((item,index)=>{
                return(
                  <TouchableOpacity style = {{display: 'flex', width: '16.6%', marginBottom: 10, marginTop: 10, flexDirection: 'column', justifyContent:'center', alignItems:'center'}} 
                  key = {item.id} onPressIn={()=>{this.setState({selectedIndex:index}); {this.changeColor}}} 
                  onPress={() => this._fetchPlaylist()}>
                    <Image
                      style = {styles.image}
                      source={this.state.selectedIndex==index ? item.active:item.inactive}/>

                    <Text onPress = {this.textStyle} style = {{ textAlign:"center", fontSize: 10, color: this.state.color ? "#81EA82" : "#ABABAB" }}>
                    {item.label}
                    </Text>

                </TouchableOpacity>
            )
            })
          }
        </View>
        <View style = {{height:200}}>
            {this.youtubeDisplay()}
        </View>

        <View style = {styles.containerPlaylist}>
          <View>
              {
                this.state.dataVideos.map((item,i) => 
                <TouchableHighlight
                key = {item.contentDetails.videoId}
                onPress = {()=> {this.youtubeDisplay(item.contentDetails.videoId)}}>
                <View style = {styles.vids}>
                  <Image
                    source = {{uri: item.snippet.thumbnails.medium.url}}
                    style = {{flex: 2, height: '100%', backgroundColor:'#fff', resizeMode:'contain'}}
                    />
                      <Text style = {styles.vidText}>{item.snippet.title}</Text>
                  </View>
                </TouchableHighlight>
                )}
          </View>
        </View>

        {/*Affichage des playlists*/}
        </ScrollView>


    </View>
    )}
  }

这是console.log(this.state.dataVideos[0].contentDetails.videoId)}

的结果

我遇到错误：无法读取未定义的属性'videoId'。