陣營母語：列表視圖前顯示加載屏幕如何填充

Question

這裏是我的代碼。我現在用爲APIComponentwillMount功能，然後使用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 - 這通常不是一個好實踐。如果您需要保留數據，請使用道具和回調來傳遞它，而不是全局。

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>); 
      } 
}