javascript - 如何在 React Native 中安装组件之前显示微调器？

Question

我有一个列表组件，需要一些时间才能加载。

我希望它在加载和安装之前显示一个旋转器，但不幸的是我尝试的一切都不起作用。

我正在尝试做这样的事情:

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: false,
        };
    }

    componentDidMount() {
        this.setState({isReady: true});
    }

    render() {
        if(this.state.isReady){
            return (
                <Content>
                    {this.renderList()}
                </Content>
            );
        }
        else {
            return (
                <Spinner/>
            );
        }

    }

    renderList() {
        return this.props.data.map((item, index) => {
            return (
                <ListItem type={this.props.type} text={item} key={index}/>
            );
        });
    }
}

我做错了什么？

Answer 1

如果您不知道哪个先出现，您应该同时检查 props.data 和 state.isReady:

    render() {
        if(this.state.isReady && this.props.data.length !== 0){
            return (
                <Content>
                    {this.renderList()}
                </Content>
            );
        }
        else {
            return (
                <Spinner/>
            );
        }

    }