当动画属性初始化 false 时，React Native ActivityIndi​​cator 不显示

我正在玩 React Native 并得到了一个奇怪的行为。

当我尝试展示一个活动指示器对于Android设置其动画化属性为 trueshowProgress如果变量以 false 启动，则变量处于不起作用的状态。

在下面的示例中，如果 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});
    }
}

但是，如果我使用下面的代码，并且动画属性以 false 开头，则使 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});
    }
}

我在这里缺少什么？

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

如果你想了解进展情况，我已经在 github 上提出了一个问题：https://github.com/facebook/react-native/issues/9023 https://github.com/facebook/react-native/issues/9023

Option 1

我使用过的解决方法是使用showProgress变量来渲染完全不同的视图ActivityIndicator:

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

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

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