React Native - 使用 Firebase 的 ListView

這是我在使用 Firebase 時所做的事情，我想使用 ListView。

使用父元件從 Firebase(Posts.js) 檢索資料：

Posts.js

import PostsList from './PostsList';

class Posts extends Component{
    constructor(props) {
        super(props);
        this.state = {
            posts: []
        }
    }
    
    componentWillMount() {
        firebase.database().ref('Posts/').on('value', function(data) {
            this.setState({ posts: data.val() });
        });
    }

    render() {
        return <PostsList posts={this.state.posts}/>
    }
}

PostsList.js

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

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

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

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

    renderRow = (post) => {
        return (
            <View>
                <Text>{post.title}</Text>
                <Text>{post.content}</Text>
            </View>
        );
    }

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

我想指出，在 Posts.js 中，我不是要匯入 firebase，因為你只需要在專案的主要元件（你有導航器的地方）中匯入一次，然後在任何地方使用它。

這是我在與 ListView 鬥爭時遇到的問題中有人建議的解決方案。我認為分享它會很好

資料來源：[ http://stackoverflow.com/questions/38414289/react-native-listview-not-rendering-data-from-firebase] [1 ]