我在玩react native,有一种奇怪的行为.

当我试图显示ActitvityIndicator for Android将其animating属性设置为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});
    }
}

但是如果我使用下面的代码,动画属性以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});
    }
}

我错过了什么?

推荐答案

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

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

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

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

React-native相关问答推荐

"npx expo run:android命令不能在Expo中运行

未执行迁移?

React Native Axios 通过数组的键过滤

无法在 M1 zsh 上运行 adb segmentation fault adb

如何在react-native 中存储/保存数据

错误发生意外错误:https://registry.yarnpkg.com/react-native-template-react-native-template-typescript:未找到

react-native-snap-carousel 无法正确渲染

iPhone 6s plus 上的字体大小

使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

如何在 react-native 中在图像周围添加阴影

使用 Bearer身份验证令牌react native图像

React-Native Packager 失败:重复的模块名称

React-Native Android - 找不到 com.android.tools:common

React Native:自定义字体在 Android 和 iOS 上呈现不同

react-native async 函数返回 promise 但不返回我的 json 数据?

SyntaxError:Strict mode does not allow function declarations in a lexically nested statement on a newly created app

无法识别的 WebSocket 连接选项 `agent`、`perMessageDeflate`、`pfx`、`key`、`passphrase`... 你的意思是把这些放在 `headers` 下吗?

如何将时刻日期转换为字符串并删除时刻对象

仅链接字体的方法

如何更改后退按钮标签,react-navigation