ReactNative - 在NavigatorIOS

Question

我正在构建一个小型的ReactNative + Redux应用程序。我目前正在使用ListView来显示作业项列表。当我点按列表中的某个项目时，我想使用JobDetailComponent导航到详细视图（NavigatorIOS）。

我现在有以下设置：

index.ios.js

class HackerJobs extends Component {

  render() {
    return (
      <Provider store={store}>
        <TabBarIOS selectedTab={this.state.selectedTab}>
          ...
          <TabBarIOS.Item
            selected={this.state.selectedTab === 'Jobs'}
            title='Jobs'
            onPress={() => {
                  this.setState({
                      selectedTab: 'Jobs',
                  })
            }}>
            <NavigatorIOS
              style={styles.navigatorWrapper}
              initialRoute={{
                component: JobsRootComponent,
                title: 'Jobs'
             }}
           />
          </TabBarIOS.Item>
          ...
    )
  }

}

JobsRootComponent.js

class JobsRootComponent extends Component {

  ...

  _pressRow(rowData, row) {
    console.log('JobsRootComponent - _pressRow ', row)
    this.props.navigator.push({
      title: 'Details',
      component: JobDetailComponent,
      passProps: { test: 'XXX' }
    })
  }

  _renderRow(rowData, section, row) {
    const title = rowData.title
    const subtitle = 'by ' + rowData.by
    return (
      <TouchableHighlight onPress={() => this._pressRow(row)}>
        <View style={styles.cellContainer}>
          <Text style={styles.cellTitle}>{title}</Text>
          <Text style={styles.cellSubtitle}>{subtitle}</Text>
        </View>
      </TouchableHighlight>
    )
  }

  render() {
    return (
        <ListView
          style={styles.container}
          dataSource={this.props.dataSource}
          renderRow={this._renderRow}
        />
      )
  }       
}

JobDetailComponent.js

export default class JobDetailComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.test}</Text>
      </View>
    )
  }
}

所以，正如您所看到的，我正在使用TabBarIOS。它有两个选项卡，其中一个用于显示带有作业项目的ListView。此标签的根目录为NavigatorIOS，同样将JobRootComponent设置为initialRoute。

一切都适用于显示数据。只有点击列表项，而不是导航到我的JobDetailComponent（如_pressRow()中所定义），应用程序崩溃才会出现以下错误：

  

ExceptionsManager.js：76警告：

     

React.createElement：类型不应该   是null，undefined，boolean或number。它应该是string（对于DOM   元素）或ReactClass（对于复合组件）。检查render   NavigatorIOS的方法。

任何人都知道我做错了什么？

Answer 1

我自己解决了这个问题，这是由于我在上面的代码示例中愚蠢地省略了我的import语句，因为我认为这可能不是我的问题所在......

无论如何，问题是我导入JobDetailComponent这样：

import { JobDetailComponent } from './JobDetailComponent'

而不是

import JobDetailComponent from './JobDetailComponent'