У меня есть индикатор хода вращения, который показывает вращающееся колесо, когда пользователь проигрывает, и когда он закончил, он прячется.Я использую то же самое состояние, когда загружено представление. Спиннер скрыт из-за состояния видимости, установленного в значение «ложь», и когда кнопка входа в систему имеет значение «истина», пока это не сработает, но после результата я хочу скрыть, что нет работа.Вот код
export default class LoginScreen extends Component {
static navigationOptions = {
title: 'Login',
headerTintColor:'black'
};
constructor(props) {
super(props);
this.state = { loginText: 'username',pwdText:'password',loading:false };
this.onLogin = this.onLogin.bind(this);
}
onLogin() {
this.setState({
loading: true
});
var params = 'username=';
params = params.concat(this.state.loginText,'&password=');
params = params.concat(this.state.pwdText);
console.log(params);
fetch("http://example.com/app/loginUser.php", {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded', // <-- Specifying the Content-Type
}),
body: params // <-- Post parameters
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson.result);
if(responseJson.result != "false") {
this.setState({
loading: false
});
Alert.alert(
'Info',
'Login successful.',
[
{text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
],
{ cancelable: false }
)
}
else {
Alert.alert(
'Info',
'Unable to login.',
[
{text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
],
{ cancelable: false }
)
this.setState({
loading: false
});
}
})
.catch((error) =>{
console.error(error);
});
}
render() {
const { navigate } = this.props.navigation;
return (
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<View style={styles.container}>
<Spinner visible={this.state.loading} textContent={"Loading..."} textStyle={{color: '#FFF'}} />
<Image style = {styles.logoFit} resizeMode="contain" source={require('./images/Logo1.png')}/>
<View>
<TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.loginText }
onChangeText={(textInputValue1) => this.setState({loginText:textInputValue1})}></TextInput>
<TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.pwdText}
onChangeText={(textInputValue2) => this.setState({pwdText:textInputValue2})}></TextInput>
</View>
<View style={styles.buttonSection}>
<TouchableOpacity onPress = {this.onLogin}>
<View style = { styles.donebutton}>ß
<Text style = {{color: 'white'}}>Login</Text>
</View>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
);
}
}