如何在MobX上使用React Native ListView?

时间:2016-08-21 22:02:57

标签: listview react-native mobx

我正在尝试使用MobX的可观察数组填充ListView in native native,如下所示:

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

1 个答案:

答案 0 :(得分:1)

如果我没记错,你需要切片狗(lol)dogs.slice(),否则ListView不会将它识别为正确的数组。可能是由renderRow呈现的组件也需要是一个观察者组件,因为它可以异步调用。

请注意,切片应该在render方法中完成,而不是在构造函数中完成;您希望每次集合更改时都会发生这种情况,而不仅仅是在构建组件时。

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