2016-07-31 90 views
0

我正在嘗試在我的react-native應用程序中使用youtube組件。但它不斷給我一個錯誤「元素類型是無效的:期望一個字符串或類/功能,但得到:對象。檢查xx的渲染方法」元素類型與React-Native中的youtube組件無效錯誤

我安裝了react-native-youtube和我的package.json似乎沒問題。

"dependencies": { 
    "react": "15.2.1", 
    "react-native": "0.30.0", 
    "react-native-tabbar-navigator": "^0.3.0", 
    "react-native-youtube": "^0.7.2" 
    } 
} 

而我的Main.js代碼如下所示。

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    TextInput, 
    View, 
    TouchableHighlight, 
    ActivityIndicator, 
    Image 
} from 'react-native'; 


var YouTube = require('react-native-youtube'); 



Class Main extends Component { 


render() { 
    return (

     <View style={styles.container}> 

     <YouTube 
     ref="youtubePlayer" 
     videoId="KVZ-P-ZI6W4" 
     play={true}   
     hidden={false}   
     playsInline={true}  
     loop={false}   
     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})}} 
     onProgress={(e)=>{this.setState({currentTime: e.currentTime, duration: e.duration})}} 

     style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}}/> 

</View> 

    ); 
    } 

    } 

我真的不知道爲什麼會發生這種錯誤。請分享您的任何想法! (:! 最佳

回答

0

使用import YouTube from 'react-native-youtube';代替var YouTube = require('react-native-youtube');

此外,你必須在你的代碼Class開頭大寫字母代替class

+0

感謝看來錯誤消失,但是,我現在看到一個空白如果我雙擊這個空白的組件,那麼它會縮小與一個黑色的背景,這似乎是一個正方形。你知道爲什麼內容不顯示?(: –

+1

您是否正確安裝ios的一部分模塊?即運行'react-native link'並將html資源複製到xcode項目中 –

+0

Hi Konstantin!正如你所說,我正確地找到了xcode項目的html文件。我不確定應該放錯位置,並且錯誤地將錯誤地放入錯誤的目錄中。謝謝!它現在有效! (: –

相關問題