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

只需从style={{flex: 1}}中删除FlatList

React Native：平面列表未呈现

1 个答案: