元素類型無效：預期字符串（內置的組件）

Question

我按照這個教程來了解如何NavigationExperimental與終極版結合：https://medium.com/@dabit3/react-native-navigator-experimental-part-3-adding-tabs-28a2c57356b6#.ltz8yp73p

可惜我不能獲得通過它，因爲我碰到下面錯誤。這涉及NavRootComponent，它是一個包裝NavigationCardStack的容器。

你能幫我找到下面的代碼錯誤嗎？

// root.js 
import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import configureStore from './store/configureStore'; 
import NavRootContainer from './containers/NavRootContainer'; 
const store = configureStore(); 

export default class extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <NavRootContainer /> 
     </Provider> 
    ) 
    } 
}; 

整個工程：https://github.com/ppiechota/sdApp

// NavRootContainer.js 
import { connect } from 'react-redux'; 
import { push, pop } from '../actions/navActions'; 
import React from 'react'; 
import Home from '../components/Home'; 
import About from '../components/About'; 
import { NavigationExperimental } from 'react-native'; 
const { NavigationCardStack } = NavigationExperimental; 

const mapStateToProps = (state) => { 
    return { 
    navigation: state.navReducer 
    } 
} 

const mapDispatchToProps = (dispath) => { 
    return { 
    pushRoute: (route) => dispatch(push(route)), 
    popRoute:() => dispatch(pop()) 
    } 
} 

class NavRootContainer extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    _renderScene = (props) => { 
    const { route } = props.scene; 
    if (route.key === 'home') { 
    return <Home _handleNavigate={this._handleNavigate.bind(this)} /> 
    } 
    if (route.key === 'about') { 
    return <About _goBack={this._handleBackAction.bind(this)} /> 
    } 
    } 

    _handleBackAction =() => { 
    if (this.props.navigation.index === 0) { 
     return false; 
    } 
    this.props.popRoute() 
    return true; 
    } 

    _handleNavigate = (action) => { 
    switch (action && action.type) { 
     case 'push': 
     this.props.pushRoute(action.route); 
     return true; 
     case 'back': 
     case 'pop': 
     return this._handleBackAction(); 
     default: 
     return false; 
    } 
    } 

    render() { 
    return (
     <NavigationCardStack 
     direction='vertical' 
     navigationState={this.props.navigation} 
     onNavigate={this._handleNavigate} 
     renderScene={this._renderScene} 
     /> 
    ); 
    } 

} 

export default connect(mapStateToProps, mapDispatchToProps)(NavRootContainer); 

Answer 1

OK，我發現了錯誤。我應該在解構時使用CardStack，但實際上我不明白爲什麼，我認爲NavigationCardStack是默認名稱。

const { 
    CardStack: NavigationCardStack 
} = NavigationExperimental 

Answer 2

不會導入Home和About組件