Question

我尝试将React Native <ListView />组件与React Native Elements中的<List />和<ListItem />组件一起使用，但<ListItem />组件不是＆＃39;显示。不完全确定原因。我的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({

})

Answer 1

看起来您的问题是您没有正确使用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，您应该使用单个对象来渲染行。

Answer 2

修复bug： renderRow={this.renderRowt} - ＆gt; renderRow={this.renderRow.bind(this)}

重构代码

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

- ＆GT;

1 -

function mapStateToProps ({ data:{makeData} }) {
        return {
            makeData,
        }
    }
    export default connect(mapStateToProps)(Make)

2 -

const mapStateToProps = ({ data:{makeData} }) => makeData
export default connect(mapStateToProps)(Make)

3 -

export default connect(({ data:{makeData} }) => makeData)(Make)

React Native ListView项目未显示

2 个答案: