Question

我有一个列表视图，当前正在显示数据源中的数据。在我的列表项中，有一个图标。我希望该图标根据应用程序状态进行更改。当this.state.deleteMode = true时，我需要图标为减号。当它是假的，它需要是一个雪佛龙。 this.state.deleteMode通过按钮切换。

我将https://github.com/react-native-community/react-native-elements#lists与标准的React-Native列表视图结合使用。

我遇到的问题是我不确定如何强制我的listview只更新图标。列表项中的其他所有内容都将保持不变。只需要更改图标。有没有办法重新渲染图标而不强制整个列表项重新渲染？我的列表项中有一个图像，当它重新呈现整个列表项时，重绘图像时会有一个短暂的闪烁。我想尽可能避免这种情况

Answer 1

我刚刚在Android上的类似应用上尝试了类似的情况，当我更新列表项道具时，我的图像没有被重新加载。它可能与你如何加载你的行有关。这是我的List组件的一些代码，它从顶部＆＃34;场景接收项目作为数组＆＃34;处理国家。

constructor(props){
    super(props);
    this.state = { ds: null };
}

static propTypes = {
    deleting:   React.PropTypes.bool.isRequired,
    onSelect:   React.PropTypes.func.isRequired,
    collection: React.PropTypes.array.isRequired
};

componentWillReceiveProps(props) {
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1.id !== r2.id });
    this.setState({ ds: ds.cloneWithRows(props.collection) });
}

renderRow(item, section, index, highlight) {
    return (
        <ListItem deleting={this.props.deleting} onSelect={this.props.onSelect} index={index} model={item}/>
    );
}

render() {
    if(!this.state.ds){
        return (
            <View/>
        );
    }

    if(this.state.ds.getRowCount() === 0){
        return (
            <View/>
        );
    }

    return (
        <ListView dataSource={ this.state.ds } renderRow={ this.renderRow.bind(this) }/>
    );
}

ListItem很简单，没有任何特别的东西。

重新发布反应原生列表项的一部分

1 个答案: