-React natif ActivityIndicator ne cache pas après la fin animation

Question

J'ai un ActivityIndicator qui montre tout en chercher au chargement et la roue disparaît lorsque componentDidMount est tiré, mais conserve et des blocs de vide dans la mise en page. Je devine comment démonter ce composant mais tout a fonctionné pour moi.

Je travaille actuellement avec ces versions:

react-native-cli: 2.0.1 
react-native: 0.40.0 

Cela fait partie du code que je utilise:

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    View, 
    ... // Couple more components here 
    ActivityIndicator, 
} from 'react-native'; 

import NewsList from './NewsList'; 

export default class HomeView extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     noticias: [], 
     animating: true, 
    }; 
    } 

componentDidMount(){ 
    fetchFunction() // My fetch function here 
     .then(data => this.setState({ data:data })) 
     this.state.animating = false 
    } 

render() { 

    return (
     <View> 
      <NewsList data={data} /> // My custom component 

      <ActivityIndicator 
      animating={this.state.animating} 
      style={[{height: 80}]} 
      color="#C00" 
      size="large" 
      hidesWhenStopped={true} 
      /> 
     </View> 
    ); 

    } 
} 

PS: Je ne suis pas en utilisant Redux.

ActivityIndicator with animation working fine The empty space when animating is set to false

Answer 1

je vous recommande de lire plus sur JSX sur la façon de montrer le contenu conditionnel https://facebook.github.io/react/docs/jsx-in-depth.html

Je supprimer complètement ActivityIndicator du DOM quand on ne se chargent pas quoi que ce soit

import React, { Component } from 'react'; 
import { View, ActivityIndicator } from 'react-native'; 

import NewsList from './NewsList'; 

export default class HomeView extends Component { 
    state = { 
    data: [], 
    isLoading: true, 
    } 

    componentDidMount() { 
    fetchFunction() 
     .then(data => this.setState({ data, isLoading: false })) 
    } 

    render() { 
    const {data, isLoading} = this.state; 

    return (
     <View> 
     <NewsList data={data} /> 
     {isLoading && (
      <ActivityIndicator 
      style={{ height: 80 }} 
      color="#C00" 
      size="large" 
      /> 
     )} 
     </View> 
    ); 
    } 
} 

Answer 2

Vous devez utiliser setState si vous voulez que votre composant à nouveau rendu.

this.setState({ animating: false }) 

au lieu de

this.state.animating = false