2017-10-04 16 views
0

ReactCountdownClockを使って簡単な例を実行しようとしています。しかし、それは初期化することができません。反応していないネイティブReactCoundownClockを活性化しない

セットアップは以下の通りである:

import React from 'react'; 
 
import { StyleSheet, Text, View } from 'react-native'; 
 
import {ReactCountdownClock} from 'react-countdown-clock'; 
 

 
export default class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.myCallback = this.myCallback.bind(this); 
 
    } 
 
    myCallback() { 
 
    console.log("test"); 
 
    } 
 
    render() { 
 
    return (
 
     <View style={styles.container}> 
 
     
 
     <ReactCountdownClock seconds={60} 
 
        color="#000" 
 
        alpha={0.9} 
 
        size={300} 
 
        onComplete={this.myCallback} /> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    backgroundColor: '#fff', 
 
    alignItems: 'center', 
 
    justifyContent: 'center', 
 
    }, 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

しかし、私はちょうどエレメントタイプが無効である得続ける:予想(内蔵部品用)は、文字列またはクラス/関数(コンポジットコンポーネントの場合):未定義です。

答えて

0

components Githubページのコーヒースクリプトコードからは、インポート時に中括弧を使用する必要はありません。だからではなく、

import { ReactContdownClock } from 'react-countdown-clock'; 

を使用しての、あなただけでは、単一のエクスポートコンポーネントがあり

import ReactContdownClock from 'react-countdown-clock'; 

原因を書くことができます。

しかしReact-Nativeについては、このコンポーネントがHTMLタグを使用し、WebViewでレンダリングされるまで表示されないため、2番目の問題が発生します。

関連する問題