react-native ActivityIndicator 初始值为false再也无法显示

今天碰到一个很奇葩的问题,后来在stackoverflow上面查,据说是react-native的一个bug。
原帖地址:http://stackoverflow.com/questions/38579665/reactnative-activityindicator-not-showing-when-animating-property-initiate-false

比如如下代码:

constructor(props) {
        super(props);
        this.state = {
            animating: true,
        };
    }

test() {

this.setState(animationg: !this.state.animating);

}

render() {

return(

<View>

<Button onPress = {this.test.bind(this)}>

</Button>

<ActivityIndicator animating = {this.state.animating} />

</View>

);

}

在这种情况下(animating初始值为true),可通过点击button实现加载框的显示和隐藏,达到预期效果。

但如果animating的初始值为false,如下所示:

constructor(props) {
        super(props);
        this.state = {
            animating: false,
        };
    }

test() {

this.setState(animationg: !this.state.animating);

}

render() {

return(

<View>

<Button onPress = {this.test.bind(this)}>

</Button>

<ActivityIndicator animating = {this.state.animating} />

</View>

);

}

则无论如何点击button,都无法将加载框显示出来。

后来在react-native官方github上看到这个问题的一个神奇的解决方法,原帖地址: https://github.com/facebook/react-native/issues/11682

只需将


<ActivityIndicator animating = {this.state.animating} /> 改为  {this.state.animating && <ActivityIndicator animating={this.state.animating} />}

即可正常运行。

完整代码如下:

constructor(props) {
        super(props);
        this.state = {
            animating: false,
        };
    }

test() {

this.setState(animationg: !this.state.animating);

}

render() {

return(

<View>

<Button onPress = {this.test.bind(this)}>

</Button>

 {this.state.animating && <ActivityIndicator animating={this.state.animating} />}

</View>

);

}




<Button onPress = {this.test.bind(this)}>

</Button>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值