Javascript React本机与Firebase ListView集成

我无法将Firebase与React Native集成。下面的代码没有像我预期的那样生成listview。我的假设是messages.val（）不会返回正确的格式。当我尝试控制台日志“messages”变量时，它返回如下

Object {text: "hello world", user_id: 1}

代码：

class Test extends Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
            })
        };
    }

    componentWillMount() {
        this.dataRef = new Firebase("https://dummy.firebaseio.com/");
        this.dataRef.on('child_added', function(snapshot){
            var messages = snapshot.val();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(messages)
            });       
        }.bind(this));
    }

    renderRow(rowData, sectionID, rowID) {
        console.log(this.state.dataSource);
        return (
            <TouchableHighlight
            underlayColor='#dddddd'>
                <View>
                    <Text>{rowData.user_id}</Text>
                    <Text>{rowData.text}</Text>
                </View>
            </TouchableHighlight>
        )
    }

    render() {
        return (
            <View>
                <ListView
                  dataSource={this.state.dataSource}
                  renderRow={this.renderRow.bind(this)}
                  automaticallyAdjustContentInsets={false} />
            </View>    
        );
    }

}

类测试扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据源：新建ListView.dataSource({
行已更改：（行1，行2）=>行1！==行2
})
};
}
组件willmount（）{
this.dataRef=新Firebase（“https://dummy.firebaseio.com/");
此.dataRef.on（'child_added'）函数（快照）{
var messages=snapshot.val（）；
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（消息）
});       
}.约束（这个）；
}
renderRow（行数据、节ID、行ID）{
log（this.state.dataSource）；
返回(
{rowData.user_id}
{rowData.text}
)
}
render（）{
返回(
);
}
}

我不知道您的Firebase数据库中有哪些数据，但据我所知，您应该为所有项目获得多个“on_child_added”事件，因此您不应该将其传递给“cloneWithRows”方法。您应该将整个数据集传递给它

虽然react native端的文档目前对于ListView数据源的工作方式以及应该传递给“cloneWithRows”的内容有点“沉默”，但代码中的文档（ListViewDataSource.js）实际上非常好，而且非常明确，您应该始终为“cloneWithRows”方法提供完整的数据集（与查看对账类似，数据源将自动计算差异，并仅修改实际更改的数据）

此外，@vjeux还写了一篇非常好的文章，介绍了他们为什么以这种方式实施ListView，包括解释他们选择的优化策略（不同于iOS的UITableView）

因此，在您的情况下，您应该将所有行累积到其他位置，只将整个消息数组传递给cloneWithRows，或者根据cloneWithRows的增量行为，不断地将传入元素追加到cloneWithRows，如下例所示（它应该很快，所以尝试一下）

从ListViewDataSource.js复制和粘贴文档：

/**
 * Provides efficient data processing and access to the
 * `ListView` component.  A `ListViewDataSource` is created with functions for
 * extracting data from the input blob, and comparing elements (with default
 * implementations for convenience).  The input blob can be as simple as an
 * array of strings, or an object with rows nested inside section objects.
 *
 * To update the data in the datasource, use `cloneWithRows` (or
 * `cloneWithRowsAndSections` if you care about sections).  The data in the
 * data source is immutable, so you can't modify it directly.  The clone methods
 * suck in the new data and compute a diff for each row so ListView knows
 * whether to re-render it or not.
 *
 * In this example, a component receives data in chunks, handled by
 * `_onDataArrived`, which concats the new data onto the old data and updates the
 * data source.  We use `concat` to create a new array - mutating `this._data`,
 * e.g. with `this._data.push(newRowData)`, would be an error. `_rowHasChanged`
 * understands the shape of the row data and knows how to efficiently compare
 * it.
 *
 * ```
 * getInitialState: function() {
 *   var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
 *   return {ds};
 * },
 * _onDataArrived(newData) {
 *   this._data = this._data.concat(newData);
 *   this.setState({
 *     ds: this.state.ds.cloneWithRows(this._data)
 *   });
 * }
 * ```
 */