Javascript 设置属性初始化动画时未显示ReactNative ActivityIndicator false

我在和当地人玩，有一种奇怪的行为

当我尝试为Android显示一个ActivityIndicator时，将其动画属性设置为true，并将

showProgress

变量设置为状态，如果变量启动为false，则该属性不起作用

在下面的示例中，如果ActivityIndicator动画属性开始为true，则按钮会使ActivityIndicator正确隐藏或显示

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableHighlight,
  ActivityIndicator
} from 'react-native';

export class Login extends Component {

    constructor(props) {
        super(props);

        this.state = {
            showProgress: true
        };
    }

    render() {
        return (
            <View>

                <TouchableHighlight onPress={this.progressOff.bind(this)}>
                    <Text>progressOff</Text>
                </TouchableHighlight>

                <TouchableHighlight onPress={this.progressOn.bind(this)}>
                    <Text>progressOn</Text>
                </TouchableHighlight>

                <ActivityIndicator animating={this.state.showProgress} size="large"/>
            </View>
        );
    }

    progressOff() {
        this.setState({showProgress: false}); 
    }

    progressOn() {
        this.setState({showProgress: true});
    }
}

import React，{Component}来自'React'；
进口{
文本，
看法
样式表，
文本输入，
触控高光，
活动指示器
}从“反应本机”；
导出类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showProgress：对
};
}
render（）{
返回(
前进
进步
);
}
progressOff（）{
this.setState（{showProgress:false}）；
}
progressOn（）{
this.setState（{showProgress:true}）；
}
}

但是，如果我使用下面的代码，动画属性以false开头，则使ActivityIndicator显示的按钮不起作用：

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableHighlight,
  ActivityIndicator
} from 'react-native';

export class Login extends Component {

    constructor(props) {
        super(props);

        this.state = {
            showProgress: false
        };
    }

    render() {
        return (
            <View>

                <TouchableHighlight onPress={this.progressOff.bind(this)}>
                    <Text>progressOff</Text>
                </TouchableHighlight>

                <TouchableHighlight onPress={this.progressOn.bind(this)}>
                    <Text>progressOn</Text>
                </TouchableHighlight>

                <ActivityIndicator animating={this.state.showProgress} size="large"/>
            </View>
        );
    }

    progressOff() {
        this.setState({showProgress: false}); 
    }

    progressOn() {
        this.setState({showProgress: true});
    }
}

import React，{Component}来自'React'；
进口{
文本，
看法
样式表，
文本输入，
触控高光，
活动指示器
}从“反应本机”；
导出类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showProgress:错误
};
}
render（）{
返回(
前进
进步
);
}
progressOff（）{
this.setState（{showProgress:false}）；
}
progressOn（）{
this.setState（{showProgress:true}）；
}
}

---

我在这里遗漏了什么？

这似乎是React Native中的一个bug。初始状态为

showProgress:false

的代码在iOS上工作，但在Android上不工作

我在github上发布了一个问题，如果您想了解进展：

选项1

我使用的一种解决方法是使用

showProgress

变量，以

ActivityIndicator

呈现完全不同的视图：

render() {
    if (this.state.showProgress) {
        return this.renderLoadingView();
    } else {
        return this.renderMainView();
    }
}

选项2

您还可以根据状态设置活动指示器的不透明度：

render() {
    return (
        <View>

            <TouchableHighlight onPress={this.progressOff.bind(this)}>
                <Text>progressOff</Text>
            </TouchableHighlight>

            <TouchableHighlight onPress={this.progressOn.bind(this)}>
                <Text>progressOn</Text>
            </TouchableHighlight>

            <ActivityIndicator style={{opacity: this.state.showProgress ? 1.0 : 0.0}} animating={true} size="large"/>
        </View>
    );
}

render（）{
返回(
前进
进步
);
}

---

但是，使用此方法时，微调器动画并不总是从同一位置开始。

如果在项目中可以使用第三方组件，我建议使用

---

很容易解决我们的问题，因为此组件使用类似的方式显示或隐藏活动，属性

可见

我搞错了这个问题。我没有将

ActivityIndicator

放在视图的中心。因此，它位于一个视图的顶部，该视图由一个国家栏覆盖。下面的代码是正确的。希望这能对你有所帮助

<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'white'}}>
  <ActivityIndicator
    animating={true}
    style={
      {
        alignItems: 'center',
        justifyContent: 'center',
        opacity: this.state.loading ? 1 : 0
      }}
    size="large"
  />
</View>

---

快速修复使用条件渲染。。继续设置动画：{true}并且只显示可见和不可见的视图

结帐：

---

这是React Native for component Activity Indicator的一个错误。 我不确定fb是否已经解决了这个问题，但你可以试试这个

 constructor(props) {
        super(props);
        this.state = {
            opacity: 0
        };
    }

要显示它，请使用此.setState（{opacity:1}），并在调用的函数中再次隐藏此.setState（{opacity:0}）

在使用活动指示器的渲染中

 <ActivityIndicator
    animating={true}
    color="#ffffff"
    style={{height: 80, marginTop: 10, opacity: this.state.opacity }}
    size="large"/>

---

我发现在没有太多代码的情况下解决该问题的另一种有效方法是：

{ this.state.showProgress &&
  <ActivityIndicator animating={true} size="large"/>
}

{this.state.showProgress&&
}

我尝试了一种不同的方法，我认为这是一种解决问题的更“反应方式”。因此，

opacity

解决方案的问题在于，如果您只将其设置为0，它仍然是一个动画，因此它不是应用程序性能的最佳解决方案

我创建了一个单独的组件，我称之为

，下面是代码：

import { ActivityIndicator } from "react-native"
import React from "react"
import PropTypes from "prop-types"

const Loading = (props) =>
    props.animating
        ? <ActivityIndicator style={props.style} 
               importantForAccessibility='auto' size={props.size} 
                     color={props.size} /> : null

Loading.propTypes = {
    animating: PropTypes.bool.isRequired,
    style: PropTypes.oneOfType([PropTypes.style, PropTypes.object]),
}

export default Loading

从“react native”导入{ActivityIndicator}
从“React”导入React
从“道具类型”导入道具类型
常量加载=（道具）=>
道具、动画
?  通过将其替换为原始的ActivityIndicator本机组件，将来可以解决此问题
 在我的例子中，对于react原生版本0.59.10，Android和iOS的大小属性类型不同，因此我必须进行如下平台检查，结果正常

<ActivityIndicator 
                size={Platform.OS === "ios" ? 0 : "large"} //This platform check worked.
                color={props.color} 
                animating={props.animating}
                style={props.style}
                />

我唯一的问题是，在Android系统中，由于屏幕上的背景，它不可见。我只将颜色道具更改为我知道应该在背景中突出的颜色：

在Android上，从
false
到
true
的
动画转换太慢。但您可以使用
键
道具强制重新渲染：



当
props.animating
从
false
更改为
true
时，它们的关键点也会更改。这将强制重新渲染，意味着使用
animating=true
渲染新组件，这将立即启动微调器。
这是用于ios的吗。默认情况下，当动画设置为False时，它会隐藏。我也有同样的问题，无法使其正常工作。当状态为false时，我最终在视觉上隐藏了指示器（
{height:0}
）update@HimalayanCoder如果将
showProgress
变量存储在
this.state
中，请通过
this.setState（）更改它
<ActivityIndicator 
                size={Platform.OS === "ios" ? 0 : "large"} //This platform check worked.
                color={props.color} 
                animating={props.animating}
                style={props.style}
                />