如何使用自定义单元组件在ReactNative中实现ListView？

Question

我正在构建一个ReactNative + Redux应用程序并使用flow组件。

在<flow name="myFlow"> <poll doc:name="Poll"> <schedulers:cron-scheduler expression="19 * * * *"/> <processor-chain> <set-payload value="#[['xxx':'yyy']]" /> <http:outbound-endpoint exchange-pattern="request-response" address="http://10.16.52.222:8081/test" method="POST" doc:name="HTTP"/> </processor-chain> </poll> <logger /> </flow> 的{​​{1}}中，我想返回自己的单元格组件（称为ListView，只接收来自组件的_renderRow()中的数据正在管理ListView（称为JobDetailCell）。

到目前为止，我想出了以下代码：

JobsRootComponent.js

props

JobDetailCell.js

ListView

但是，当我运行应用程序时，我在chrome dev控制台中收到以下错误：

  

ExceptionsManager.js：76警告：

     

JobsRootComponent：类型不应该   是import React, { Component, StyleSheet, Text, View, ListView, ActivityIndicatorIOS, NavigatorIOS, TouchableHighlight } from 'react-native' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' import { fetchJobs } from '../actions/Actions' import { JobDetailCell } from './JobDetailCell' import { JobDetailComponent } from './JobDetailComponent' class JobsRootComponent extends Component { ... _renderRow(rowData) { const title = rowData.title const subtitle = rowData.by return ( <JobDetailCell title={title} subtitle={subtitle}></JobDetailCell> ) } ... render() { return ( <ListView style={styles.container} dataSource={this.props.dataSource} renderRow={this._renderRow} /> ) } ... } ，import React, { Component, StyleSheet, Text, View, } from 'react-native' export default class JobDetailCell extends Component { render() { return ( <View style={styles.cellContainer}> <Text style={styles.cellTitle}>{this.props.title}</Text> <Text style={styles.cellSubtitle}>{this.props.subtitle}</Text> </View> ) } } ，React.createElement或null。它应该是undefined（对于DOM   元素）或boolean（对于复合组件）。检查number   string的方法。

有人可以告诉我这里做错了吗？

Answer 1

问题是您以错误的方式导入组件。

这一行

import { JobDetailCell } from './JobDetailCell'

相当于这一行：

var JobDetailCell = require('./JobDetailCell').JobDetailCell;

由于您导出的组件本身没有定义，因此没有名为JobDetailCell的字段。

这是您应该如何导入组件：

import JobDetailCell from './JobDetailCell'