当动画属性启动为false时,ReactNative ActivityIndi​​cator不显示

Question

我正在玩反应原生,并有一个奇怪的行为.

当我尝试显示一个用于Android 的ActitvityIndi​​cator将其动画属性设置为true时,showProgress状态中的变量如果变量启动为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});
    }
}

我在这里错过了什么？

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

但是,使用此方法时,微调器动画并不总是从相同的位置开始.