Question

我尝试使用React Native ListView组件，但它没有渲染。 ListView采用dataBlob这是一个数组，这就是我传递给它的内容。

在我的主要组件中，我使用componentWillMount从Firebase获取数据。这给了我一个包含消息和发送者的对象数组。

示例：[{text: 'Hello', sender: 'p1'}, {text: 'Hi', sender: 'p2}]

主要成分：

constructor(props) {
    super(props);
    this.state = {
        messages: []
    }
}

componentWillMount() {
    app.database().ref('messages/').on('child_added', function(snapshot) {
        let data = snapshot.val();
        for(let i in data) {
            this.state.messages.push(data[i]);
        }
        this.setState({messages: this.state.messages});
    }.bind(this));
}

render() {
    return (
        <View>
            <MessagesList messages={this.state.messages}/>
        </View>
    )
}

MessagesList组件：

constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
        dataSource: ds.cloneWithRows(props.messages)
    }
}
renderRows = (data) => {
    return (
        <View>
            <Text>{data.text}</Text>
        </View>
    )
}

render() {
    return(
        <ListView
            dataSource={this.state.dataSource}
            renderRow={(data) => this.renderRows(data)}
            enableEmptySections={true}
        />
    )
}

当我将一组对象硬编码到dataSource中时，它可以工作，但不能使用来自主要组件的数组传递。

Answer 1

更改您的MessagesList组件＆＃39;构造函数如：

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

然后添加此实用程序功能：

 getDataSource(messages: Array<any>): ListView.DataSource {
    if(!messages) return;
    return this.state.dataSource.cloneWithRows(messages);
 }

另外添加：

 componentDidMount(){
    this.setState({dataSource: this.getDataSource(this.props.messages)});
 }

然后这些行应该可以解决问题：

 componentWillReceiveProps(props) {
    this.setState({dataSource: this.getDataSource(props.messages)});
 }

抱歉，没有时间对它进行测试，但我希望你能得到这个想法！

React Native - ListView无法从Firebase渲染数据

1 个答案: