反应原生活动指示器在动画完成后不会隐藏

Question

我有一个ActivityIndicator，它在加载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>
);
}
}

附言：我没有使用Redux。

动画工作正常的ActivityIndicator设置动画时的空白设置为假

Answer 1

我建议您阅读更多关于如何有条件地显示内容的JSXhttps://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

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

this.setState({ animating: false })

而不是

this.state.animating = false