React Native：平面列表不呈現

Question

我正在嘗試加載一個平面列表，其中包含從 firebase 獲取的一些項目。 我已經能夠驗證我正在從 firebase 獲取數據。

獲取數據后，我將狀態鍵“isLoading”更新為 false，以顯示 flatList。

只是為了測試我已經將數據設置為一組靜態值，但它仍然沒有呈現。

任何想法為什么？

export default class ListScreen extends Component {

    state = {
        posts: [],
        isLoading: true
    }

    componentDidMount() {

        fetch('https://test.firebaseio.com/posts.json', {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            return response.json();
        })
        .then(items => {

            this.setState({
                posts: items,
                isLoading: false
            })

        }).catch(err => {
            alert(JSON.stringify(err));
        });

    }

    render() {

        const activityIndicator = <ActivityIndicator />

        let list;
        if(this.state.isLoading) {
            list = activityIndicator
        } else {
            list = <FlatList style={{flex: 1}} data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => {
                return <Text>{item.key}</Text>
            }} keyExtractor={(item) => { return item.key; }} />
        }

        return (
            <View style={styles.container}>
                <Text>Posts</Text>
                <Button title="Add Post" onPress={() => {
                    this.onAddPost();
                }} />

                <View>{list}</View>

            </View>
        )

    }

    onAddPost = () => {
        this.props.navigation.navigate('create');
    }

}

Answer 1

只需從FlatList刪除style={{flex: 1}}