Today encountered a very wonderful problem, and later in the StackOverflow above, is said to be a react-native bug.
Original address: http://stackoverflow.com/questions/38579665/ Reactnative-activityindicator-not-showing-when-animating-property-initiate-false
For example, the following code:
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>
);
}
In this case (the animating initial value is true), the load box can be displayed and hidden by clicking on the button to achieve the desired effect.
But if the initial value of animating is false, as follows:
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>
);
}
The load box cannot be displayed by clicking the button anyway.
Later on React-native official GitHub see a magical solution to this problem, the original address: https://github.com/facebook/react-native/issues/11682
Just add
<activityindicator animating = {this.state.animating}/> changed to {this.state.animating && < Activityindicator animating={this.state.animating}/>}
To run correctly.
The complete code is as follows:
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>