今天碰到一个很奇葩的问题,后来在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>