如何将 React Native ListView 与 MobX 一起使用？

Question

我正在尝试使用 MobX 的可观察数组在本机反应中填充 ListView，如下所示：

constructor(props) {
        super(props)
        var dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        let dogs = props.store.dogs;
        this.state = { dogs: dogs, dataSource: dataSource };
    }

    render() {

        var dogs = this.state.dogs;
        var dataSource = this.state.dataSource.cloneWithRows(dogs);

        return <ListView
            dataSource={dataSource}
            renderRow={this.renderRow}
            />
    }

但是当运行代码时，永远不会调用 renderRow()。它就像 cloneWithRows() 方法不知道如何克隆行。

有人成功过吗？（并且还让它表现得当狗的名字在狗列表中发生变化时，列表中的单元格将重新呈现）

更新：更多信息在这里 https://github.com/mobxjs/mobx/issues/476

Answer 1

如果我没记错的话，您需要将狗切片（笑）dogs.slice()，否则 ListView 将无法将其识别为正确的数组。可能 renderRow 渲染的组件也需要是观察者组件，因为它可以被异步调用。

注意切片应该在render方法中完成，而不是在构造函数中；您希望它在每次集合更改时发生，而不仅仅是在构造组件时发生。

另请参阅：https://github.com/mobxjs/mobx/issues/476

如何将 React Native ListView 与 MobX 一起使用？

How to use React Native ListView with MobX?

listview

react-native

mobx