Question

这个菜单

import React from 'react'
import { View, Icon } from 'react-native'
import { connect } from 'react-redux'
import { togglePageMenu } from './menu.action'
import { OffCanvas3D } from 'react-native-off-canvas-menu'
import SearchPage from '../search-page/SearchPage'

const mapStateToProps = (state) => ({
  isOpen: state.get('menu').get('isOpen')
})

const mapDispatchToProps = (dispatch) => ({
  togglePageMenu: () => {
    dispatch(togglePageMenu())
  }
})

let Menu = (props) => (
  <View style={{ flex: 1 }}>
    <OffCanvas3D
      active={props.isOpen}
      onMenuPress={props.togglePageMenu}
      backgroundColor={'#222222'}
      menuTextStyles={{ color: 'white' }}
      handleBackPress={true}
      menuItems={[
        {
          title: 'Menu 1',
          icon: <Icon name="camera" size={35} color='#ffffff' />,
          renderScene: <SearchPage />
        }
      ]} />
  </View>
)
Menu.propTypes = {
  togglePageMenu: React.PropTypes.func.isRequired,
  isOpen: React.PropTypes.bool.isRequired
}

Menu = connect(
  mapStateToProps,
  mapDispatchToProps
)(Menu)

export default Menu

当我在另一个组件的render方法中将其添加到我的应用中时：

  render() {
    return (
      <Container >
        <SearchPage />
        <Menu />
      </Container>
    )
  }

我收到错误：

ExceptionsManager.js：71未处理的JS异常：元素类型是   invalid：期望一个字符串（对于内置组件）或a   类/函数（对于复合组件）但得到：undefined。您   可能忘记从您定义的文件中导出组件。

检查Menu。
的渲染方法

我无法弄清楚为什么我会收到这个错误。有什么想法吗？

编辑：当我删除菜单中的renderScene属性时，它没有错误。我正确导入searchPage。为了证明这一点，我删除了SearchPage并使用<View></View>中的renderScene并获得了相同的错误。

Answer 1

您要做的是在容器内部渲染菜单组件而不传递任何道具，但菜单组件需要道具，例如isOpen和togglePageMenu。

你需要这样做才能摆脱错误： -

<Menu togglePageMenu= { () => this.yourFunctionName() } isOpen={true/false} />

干杯：）

Answer 2

实际上Icon属性中的menuItems属性导致了所有问题。它没有给出一个非常好的错误消息，因为我导入了错误类型的Icon。它期待import Icon from 'react-native-vector-icons/EvilIcons'。可能可以帮助其他人使用react-native-off-canvas-menu，这样就可以了。

使用react-native-off-canvas-menu时，元素类型无效

2 个答案: