ReactNative ActivityIndi​​cator不显示动画属性启动虚假时

Question

我正在玩反应本机，并得到了一个奇怪的行为。

当我试图表明一个ActitvityIndi​​cator为Android其动画属性设置为true，在状态的showProgress变量如果变量开始为假这是行不通的。

在下面的示例中，如果ActivityIndi​​cator动画属性的起始值为true，那么按钮会使ActivityIndi​​cator隐藏或正确显示。

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

但是，如果使用下面的代码，用动画属性起假，那么按钮使ActivityIndi​​cator出现不工作：

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

缺少什么我在这里？

Answer 1

这似乎是React Native中的一个错误。初始状态为showProgress: false的代码适用于iOS，但不适用于Android。

我已经在GitHub上开设了一个问题，如果你想跟着进展： https://github.com/facebook/react-native/issues/9023

选项1

我用一种解决方法是使用showProgress变量来呈现一个完全不同视图与ActivityIndicator：

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

选项2

您也可以根据国家规定的ActivityIndicator的不透明度：

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

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

Answer 2

如果你的项目，你可以使用第三方组件，我建议使用react-native-loading-spinner-overlay

容易解决我们的问题，东阳这个组件使用类似的方式来显示或隐藏活动与物业visible。

Answer 3

我得到这个问题都是由一个错误。我没有把ActivityIndeicator放在视图的中心。所以它位于视图的顶部，由一个natigation酒吧覆盖。以下代码是正确的。希望这可以帮助你。

<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> 

Answer 4

速战速决使用条件渲染 ..请动画：{}真实和公正的可见光和不可见的视图。

结帐：

https://kylewbanks.com/blog/how-to-conditionally-render-a-component-in-react-native

Answer 5

这是阵营天然对于组分活动指示器的一个错误。 我不知道该FB已经解决了，但你可以试试这个

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

显示它使用this.setState（{不透明度：1}），并再次隐藏this.setState（{不透明度：0} ）在调用的函数

和渲染，你正在使用活动的指标

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