애니메이션

Question

을 마친 후 반작용 네이티브 ActivityIndicator 내가 레이아웃에 로드 가져 오는 동안 보여줍니다 componentDidMount이 발사 될 때 바퀴가 사라지지만 계속 ActivityIndicator 및 빈 블록 공간이 숨기지 않습니다. 이 구성 요소를 분리하는 방법을 추측하고 있지만 나에게 도움이되는 모든 것이 있습니다.

것은 내가 현재이 버전 함께 일하고 있어요 :

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 :

이

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

이 내가 사용하고 코드의 일부입니다 내가 돌아 오는을 사용하지 않는. 당신이 당신의 구성 요소를 다시 렌더링하려면

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

Answer 1

나는 우리가 아무것도

를로드하지 않을 때 조건부 https://facebook.github.io/react/docs/jsx-in-depth.html

내가 완전히 DOM에서 ActivityIndicator을 제거 할 내용을 표시하는 방법에 대한 JSX에 대한 자세한 내용을하는 것이 좋습니다

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

당신은 setState를를 사용한다.

this.setState({ animating: false }) 

대신

this.state.animating = false