元素类型无效：期望一个字符串（用于内置组件）

Question

我按照本教程了解如何将NavigationExperimental与Redux结合使用：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

好的，我发现了错误。我应该在解构时使用CardStack，但实际上我不明白为什么，我认为NavigationCardStack是默认名称。

const {
  CardStack: NavigationCardStack
} = NavigationExperimental

Answer 2

您不导入Home和About组件