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

Question

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

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

cat odbc.ini
[SQLServer]
Description     = ODBC for MSSQL
Driver          = DRIVER_ISSUE
Servername      = 
Database        = 
UID             = 
Port            = 1433

cat /etc/odbcinst.ini
[DRIVER_ISSUE]
Description     = ODBC for MSSQL
Driver          = /usr/lib/x86_64-linux-gnu/odbc/libodbcmyS.so
Setup           = /usr/lib/x86_64-linux-gnu/odbc/libmyodbc.so
UsageCount      = 1
FileUsage       = 1

这是我使用的代码的一部分：

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

PS：我没有使用Redux。

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

Answer 1

我建议您阅读有关如何有条件地展示内容的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>
    );
  }
}

Answer 2

如果希望再次渲染Component，则应该使用setState。

this.setState({ animating: false })

而不是

this.state.animating = false