React-Native：如何在填充列表视图之前显示加载屏幕

Question

这是我的代码。我正在使用 API的 ，然后使用 isLoading 变量，并相应地显示特定的视图。但它不起作用 ...它似乎是我做错了什么请一瞥并帮助我，我是新来的反应 - 本地

const UserPage = React.createClass({

    getInitialState() {
        return {
            dataSource: dataSource.cloneWithRows(dataList),
            isLoading:true
        }
    },

    componentWillMount() {

        SharedPreferences.getItem("sender_id", (value) => {
            let user_id = value;
            let url = "BaseURL/fetchSendTokens?user_id="+user_id;
            fetch(url, {
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
            })
                .then((response) => response.json())
                .then((responseData) => {
                    if (responseData.responsecode === 1) {
                        dataList = responseData.data;
                        this.setState = ({
                            dataSource: this.state.dataSource.cloneWithRows(dataList),
                            isLoading:false,
                        })
                    }
                    else {
                        ToastAndroid.show('Please try again...', ToastAndroid.SHORT);
                    }
                })
                .catch(e => {
                    ToastAndroid.show('Please try again...', ToastAndroid.SHORT);
                })
                .done();
        });
    },


    renderRow(rowData, sectionID,){

        let  currentView = (rowData.visitor_profileImageUrl)?
            <Image
                source={{uri:rowData.visitor_profileImageUrl}}
                style={{height:40,width:40,margin:15,borderRadius:100}}
                resizeMode="contain"/> :
            <Image
                source={userprofilepic}
                style={{height:40,width:40,margin:15,borderRadius:100}}
                resizeMode="contain"/>;

        return <View key={ sectionID }>
            <View style={{ flex: 1,height:70,flexDirection: 'row'}}>
                <View>
                    {currentView}
                </View>
                <Text style={{fontSize : 18,marginTop:15,marginLeft:20,color:"black"}} >{ rowData.visitor_name }</Text>
            </View>
        </View>
    },

    render() {
        let loadingGif = "URL-loading.gif";
        let currentView = (this.state.isLoading)?<View style={styles.background}>
                <View style={styles.markWrap}>
                    <Image source={{uri:loadingGif}} style={styles.verifyLogo} resizeMode="contain"/>
                </View>
            </View>:
            <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} enableEmptySections={true}/>;

        return(
            <View>
                {currentView}
            </View>
        );

    },
});

Answer 1

你的问题是错字：

                    this.setState = ({
                        datasource: this.state.dataSource.cloneWithRows(dataList),
                        isLoading:false,
                    })

应该是：

                    this.setState = ({
                        dataSource: this.state.dataSource.cloneWithRows(dataList),
                        isLoading:false,
                    })

请注意，您似乎保留了全局dataSource和dataList - 这通常不是一个好习惯。如果你需要保存数据，可以使用props和callback来传递数据，而不是全局数据。

Answer 2

    constructor(props){
       super(props);

       this.state = {
         loading: true,
       }

    } 

    render(){
       if (this.props.loading) {
              return (<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}><ActivityIndicator
                animating={states.campaign.loading}
                style={[styles.centering, { height: 80 }]}
                size="large"
              /></View>);
            }else{
              return (<ListView></ListView>);
            }
}