动画完成后,React-Native ActivityIndi​​cator不会隐藏

Question

我有一个ActivityIndi​​cator,显示当fetch正在加载时,当触发componentDidMount时轮子消失,但是在布局中保留并清空块空间.我猜是如何卸载这个组件,但任何事情对我有用.

我目前正在使用这些版本:

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

这是我正在使用的代码的一部分:

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:我没有使用Redux.

动画工作正常 的ActivityIndi​​cator动画设置为false时的空白空间

Answer 1

我建议你阅读更多关于如何有条件地显示内容的JSX https://facebook.github.io/react/docs/jsx-in-depth.html

ActivityIndicator当我们没有加载任何东西时,我会完全从DOM中删除

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