Question

所以我得到了这段代码，我想在FlatList之后的屏幕底部显示Spinner，但是当调用displaySpinner函数时，flatlist之后什么也不显示。我尝试了很多事情，例如尝试将Spinner显示在视图顶部，然后将其命名为Top，但这并不是我想要的。顺便说一下，我是程序设计领域的新手，还有React Native的更多人，所以我希望一切都能理解我的问题

import React, { Component } from 'react';
import { FlatList, StyleSheet, View, Text, Image } from 'react-native';
import axios from 'axios';
import moment from 'moment';
import Card from './Card';
import CardSection from './CardSection';
import Spinner from './Spinner';

class ArticleList extends Component {
    state = { articles: [],
        refreshing: false,
        isLoading: false,

    };

    componentWillMount() {
        this.loadArticles();
    }

    currentOffset = 0;



   reloadContent() {
    this.setState({

        isLoading: true
    });
        this.currentOffset += 20;
        console.log(this.currentOffset);
        this.loadArticles(); 
    }

    loadArticles = () => {
        const { articles } = this.state;


        console.log(this.currentOffset);

        axios.get(`https://sportsoftheday.com/wp-json/wp/v2/posts?per_page=20&offset=${this.currentOffset}`)
            .then(res =>
                this.setState({
                    articles: this.currentOffset === 0 ? res.data : [...articles, ...res.data],
                    isLoading: false,
                }))
            .catch(err => {
                console.error(err);
            });
    };
    displaySpinner() {
        if (this.state.isLoading === true) {
            return <Spinner size='large' />;
        }
    }

    //Apply removeClippedSubviews for eliminating useless data on the screen


    render() {
        const { articles } = this.state;

        this.date = this.date;
        this.fimg_url = this.fimg_url;

        return (
<View>

                <FlatList
                    data={articles}
                    renderItem={({ item }) => (


                        <Card>

                            <CardSection>

                                <View style={styles.thumbnailContainerStyle}>

                                    <Image
                                        style={styles.thumbnailStyle}
                                        source={{
                                            uri: item.fimg_url,
                                            cache: 'only-if-cached'
                                        }}

                                    />

                                </View>
                                <View style={styles.headerContentStyle}>

                                    <Text style={{ color: '#B2B2B2' }}>
                                        {moment(item.date).format('dddd, Do MMMM YYYY')}</Text>
                                    <Text
                                        numberOfLines={3}
                                        style={styles.headerTextStyle}
                                    >
                                        {item.title.rendered}

                                    </Text>


                                </View>

                            </CardSection>

                        </Card>

                       )}


                    keyExtractor={i => i.id}
                   onEndReached={this.reloadContent.bind(this)}

                    onEndReachedThreshold={0.1}
                />

               {this.displaySpinner()}
            </View>


        );
    }


}

const styles = StyleSheet.create({

    headerContentStyle: {
        flexDirection: 'column',
        justifyContent: 'space-around',
        flex: 1

    },
    headerTextStyle: {
        textAlign: 'justify',

        fontSize: 18,
        color: 'black',
        marginRight: 15
    },
    thumbnailStyle: {
        height: 70,
        width: 70
    },
    thumbnailContainerStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 10,
        marginRight: 10
    },
    imageStyle: {
        height: 300,
        flex: 1,
        width: null
    },


});

export default ArticleList;

Answer 1

首先，您应始终避免直接在FlatList的renderItem = { }属性中渲染视图/组件。始终发送绑定到当前上下文的函数，该函数返回组件renderItem = {this._renderItem.bind(this)}或renderItem = {() => renderItem()}。这不是问题，而是使代码保持整洁和专业的通常做法。既然您提到您是RN的新手，这只是一个建议。

出现问题时，一旦将Spinner包裹在View组件中，旋转器就会出现。您可以通过包装函数调用<View> {this.displaySpinner()} </View>或返回已经包装在视图<View> <Spinner/> </View>中的组件来完成此操作。为了使此方法更加有效，如果视图中有一个（显然），则包装所有东西，包括您的平面列表，但不包括标题，并给它一种弹性flex: 1的样式，其方向为列'flexDirection: 'column'。现在，您可以使用justifyContent: 'space-around'或'space-between'来证明自己的内容合理。

我想提出的最后一点是一个建议。我已经在RN上工作了一段时间，但仍然发现设计UI是最繁琐的任务之一。热装虽然有帮助，但作用不大。要跟踪屏幕上的UI更改，可以将样式borderColor: 'red', borderWidth: 1赋予视图。这将对您有很大帮助。它肯定对我有帮助。

我希望这会有所帮助。祝你好运

Answer 2

在该视图中将旋转器包裹起来，例如View style = {{position：“ absolute”，bottom：0，width：'100％'}} {this.displaySpinner（）} 关闭视图

反应本机微调器不显示在底部

2 个答案: