javascript - react native ListView项目不显示

我试图将React Native的<ListView />组件与React Native Elements中的<List />和<ListItem />组件一起使用，但是<ListItem />组件未显示。不确定原因。我的renderRow函数不应该为数组中的每个对象运行并返回<Listitem />吗？我的数据很好。



请让我知道我在做什么错。谢谢!代码如下

import React, { PropTypes, Component } from 'react'
import { View, Text, ListView, StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { List, ListItem } from 'react-native-elements'
import { getMakeData } from '~/redux/modules/data'

class Make extends Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        makeData: PropTypes.array.isRequired
    }
    constructor (props) {
        super(props)
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 })
        this.state = {
            dataSource: this.ds.cloneWithRows(this.props.makeData)
        }
    }
    componentDidMount () {
        this.props.dispatch(getMakeData())
    }
    renderRow = (item) => {
        return (
            <ListItem
                key={item.id}
                title={item.name}
            />
        )
    }
    render () {
        console.log(this.props.makeData)
        return (
            <List style={{flex: 1}}>
                <ListView
                    renderRow={item => this.renderRow(item)}
                    dataSource={this.state.dataSource}
                />
            </List>
        )
    }
}

function mapStateToProps ({data}) {
    return {
        makeData: data.makeData
    }
}

export default connect(mapStateToProps)(Make)

const styles = StyleSheet.create({

})

最佳答案

看来您的问题是您没有正确使用renderRow。根据您的描述，makeData是一个对象数组，因此在render函数中，您使用该数组调用ListView，但是renderRow应该仅呈现单行，并且应在每一行的数据中传递。因此，如下所示更改renderRow和render函数

renderRow (item) {
    return (
        <ListItem
            key={item.id}
            title={item.name}
        />
    )
}
render () {
    return (
        <List style={{flex: 1}}>
            <ListView
                renderRow={(item) => this.renderRow(item)}
                dataSource={this.props.makeData}
            />
        </List>
    )
}

现在发生的是，您在这里告诉renderRow是您应该使用的对象。

以前的工作是尝试使用ListItem数组来呈现makeData，在这里应该使用单个对象来呈现行。