reactxネイティブ引き出しを反応ネイティブルータフラックスでレフィックスとどのように実装するのですか？

Question

私はreact-native-router-fluxでreduxネイティブドロワーをreduxで実装しようとしています。次の例を試してみてください：https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.mdまだエラーが発生しています：Element type is invalid: expected a string (for built-in components) but got: object. Check the render method of 'DefaultRenderer'.

リアクションネイティブルータフラックスでドロワーを実装する正しい方法は何ですか？

EDIT - UPDATE：まだ、まだエラーなって「要素の型が無効です...」

クイック注：私はActions.drawerをすれば、私はエラーを取得するが、私はActions.home何もしない場合起こるが、アクションのREACT_NATIVE_ROUTER_FLUX_RESETはまだ私がログイン中にボタンを押すと、それがナビゲートするActions.トリガーその後

const RouterWithRedux = connect()(Router) 
const store = configureStore() 

export default class App extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <RouterWithRedux> 
      <Scene key='root'> 
      <Scene component={Login} initial={true} key='login' title='Login'/> 
      <Scene key="drawer" component={NavDrawer} initial={true}> 
       <Scene component={Home} key='home' title='Home' type='reset'/> 
      </Scene> 
      </Scene> 
     </RouterWithRedux> 
     </Provider> 
    ) 
    } 
} 

と呼ばれています。 NavDrawerは次のとおりです。

import React, { PropTypes } from 'react' 
import Drawer from 'react-native-drawer' 
import { Actions, DefaultRenderer } from 'react-native-router-flux' 

import NavDrawerPanel from './NavDrawerPanel' 

export default class NavDrawer extends Component { 

    componentDidMount() { 
     Actions.refresh({key: 'drawer', ref: this.refs.navigation}); 
    } 

    render() { 
    const state = this.props.navigationState; 
    const children = state.children; 

    return (
     <Drawer 
     ref="navigation" 
     type="displace" 
     content={<NavDrawerPanel />} 
     tapToClose 
     openDrawerOffset={0.2} 
     panCloseMask={0.2} 
     negotiatePan 
     tweenHandler={(ratio) => ({ 
      main: { opacity: Math.max(0.54, 1 - ratio) }, 
     })} 
     > 
     <DefaultRenderer 
      navigationState={children[0]} 
      onNavigate={this.props.onNavigate} 
     /> 
     </Drawer> 
    ); 
    } 
} 

そしてNavDrawerPanelは次のとおりです。

import React from 'react'; 
import {PropTypes} from "react"; 
import { 
    StyleSheet, 
    Text, 
    View, 
} from "react-native"; 
import { Actions } from 'react-native-router-flux'; 

const NavDrawerPanel = (props, context) => { 
    const drawer = context.drawer; 
    return (
    <View style={styles.container}> 
     <TouchableHighlight> 
     <Text>Home</Text> 
     </TouchableHighlight> 
     <TouchableHighlight> 
     <Text>Profile</Text> 
     </TouchableHighlight> 
     <TouchableHighlight> 
     <Text>Friends</Text> 
     </TouchableHighlight> 
    </View> 
) 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    padding: 30, 
    backgroundColor: 'black' 
    }, 
}) 

エラー：

Answer 1

がちょうど最初の答えにコピー＆ペーストの引き出しのコンポーネント... thisリンクを参照してください。.. このコードを試して、DefaultRendererに置き換えてください。

<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/> 

Answer 2

私はあなたのコンポーネントに問題があると思います。

あなたは、このような引き出しビューをインポートする注：

import NavDrawerPanel from './NavDrawerPanel' 

いますが、NavDrawerPanelファイルを詳しく見てみた場合、デフォルトのエクスポートはありません。だからではなく、

const NavDrawerPanel 

を有していると、あなたは持っている必要があります。

export const NavDrawerPanel 

エラーは少し紛らわしいですが、それは引き出しの見解ではない引き出しのコンポーネント自体を参照することです。それがトリックであるかどうかを教えてください:)