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

Question

我有一个 ActivityIndi​​cator，它在 fetch 加载时显示，当 componentDidMount 被触发时，轮子消失，但保持空块 space 在布局中。我在猜如何卸载这个组件，但对我来说一切都有效。

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

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。

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

Answer 1

如果您希望您的组件再次呈现，您应该使用 setState。

this.setState({ animating: false })

而不是

this.state.animating = false

Answer 2

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

当我们不加载任何内容时，我会从 DOM 中完全删除 ActivityIndicator

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