React Native Navigator：预期组件 class，得到 [object Object]

Question

当我尝试通过 Navigator 组件加载新的 Component 时，会显示标题中显示的错误。

我的导航器组件视图如下所示：

render(){
    return(
      <Navigator
        initialRoute={{name: 'Feed', component: Feed}}
        renderScene={(route, navigator) => {
            if(route.component){
              return React.createElement(route.component, {navigator, ...this.props})
            }
          }
        }
      />
    )
  }
}

initialRoute 完美呈现正确的视图。呈现的 child 组件 Feed 包含一个按钮列表，这些按钮更新导航器并使其呈现新组件，如下所示：

  updateRoute(route){
    this.props.globalNavigator(route)
    this.props.navigator.push({
      name: route.displayLabel,
      component: route.label
    })
  }

  render(){
    return(
      <View style={styles.bottomNavSection}>
        {
          this.state.navItems.map((n, idx) => {
            return(
              <TouchableHighlight
                key={idx}
                style={this.itemStyle(n.label, 'button')}
                onPress={this.updateRoute.bind(this, n)}
              >
                <Text
                  style={this.itemStyle(n.label, 'text')}
                >
                  {n.displayLabel}
                </Text>
              </TouchableHighlight>
            )
          })
        }
      </View>
    )
  }

请注意 function updateRoute(route) 接收新组件的名称如下：onPress={this.updateRoute.bind(this, n)}。例如，n 等于 {displayLabel: 'Start', label: 'Feed', icon: ''},。

编辑我的 Profil.js 组件的内容：

import React, { Component } from 'react'
import ReactNative from 'react-native'
import API from '../lib/api'

import BottomNavigation from '../components/BottomNavigation'

const {
  ScrollView,
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
} = ReactNative

import { connect } from 'react-redux'

class Profil extends Component {

  constructor(props){
    super(props)
  }

  render(){
    return(
      <View style={styles.scene}>
        <ScrollView style={styles.scrollSection}>
          <Text>Profil</Text>
        </ScrollView>
        <BottomNavigation {...this.props} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  scene: {
    backgroundColor: '#0f0f0f',
    flex: 1,
    paddingTop: 20
  },
  scrollSection: {
    flex: .8
  }
})

function mapStateToProps(state){
  return {
    globalRoute: state.setGlobalNavigator.route
  }
}

export default connect(mapStateToProps)(Profil)

Answer 1

我想你忘记导出组件了。

Answer 2

问题是 onPress={this.updateRoute.bind(this, n)} 没有包含正确的组件引用，而是包含作为字符串的组件名称。

通过更改函数修复了它：

 updateRoute(route){
    this.props.globalNavigator(route)
    this.props.navigator.push({
      name: route.displayLabel,
      component: route.component
    })
  }

并在文档开头使用组件引用和导入组件增强状态。

this.state = { 
   navItems: [
      {displayLabel: 'Start', label: 'Feed', icon: start, component: Feed},
   ]
}

React Native Navigator：预期组件 class，得到 [object Object]

React Native Navigator : Expected a component class, got [object Object]

react-native

navigator

react-native-navigation