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