Reactjs 如何在连接进入react native时显示等待指示器？

我正在react native中开发一个登录页面，使用PHP作为后端（从中获取sql数据）

我的问题是，当我写下用户名和密码并单击我的连接按钮时，我需要向用户显示我正在处理他的连接

我想在查询完成时显示对话框

 export default class Home extends React.Component {
  constructor(props){
       super(props);}

    userRegister = () =>{
      const usermail = this.state.usermail;
      const password = this.state.password;
   fetch('http://192.168.1.2:80/netOne/recup.php',{
   method:'post',
   header:{'Accept':'application/json','Content-type' :'application/json'},
   body:JSON.stringify({email:usermail,password:password,})})
   .then((responseData)=>responseData.text())
   .then((responseJson)=>{
   if(responseJson =='Data Matched'){
     this.props.navigation.navigate( 'Welcome')}
   else{alert(JSON.stringify("Merci de saisir des données convenables"));}})
   .catch((error)=>{console.error(error);})

    render() {
        return (
            <View style={styles.container}>
            <Image
         style={{width: 150, height: 150}}
         source={require('./netOne.jpg')}
       />
            <View style={styles.pass}>
            <Text style={{marginTop:20 , color:'grey'}}>Username :</Text>
            <TextInput placeholder={this.state.placeholder1} style={{flex:1,paddingLeft:5}}
            onChangeText= {usermail=>this.setState({usermail })}/>
             </View>

            <View style={styles.pass}>
        <Text style={{marginTop:20 , color:'grey'}}>Password :</Text>
        <TextInput placeholder={this.state.placeholder2} style={{flex:1,paddingLeft:5}} secureTextEntry={this.state.secureTextEntry}
        onChangeText= {password=>this.setState({password})}
        />

            <TouchableOpacity onPress={this.secure} style={{margin:20}}>
            <Icon name="eye" size={20}  /></TouchableOpacity>
            </View>

            <TouchableOpacity style={styles.butt} onPress={this.userRegister}>
                <Text>Connexion</Text>
            </TouchableOpacity>


            </View>
        );

    }

}

导出默认类Home.Component{
建造师（道具）{
超级（道具）；}
用户注册=（）=>{
const usermail=this.state.usermail；
const password=this.state.password；
取（'http://192.168.1.2:80/netOne/recup.php',{
方法：'post'，
标题：{'Accept'：'application/json'，'Content-type'：'application/json'}，
正文：JSON.stringify（{email:usermail，password:password，}}）
.然后（（responseData）=>responseData.text（））
.然后（（responseJson）=>{
if（responseJson=='Data Matched'）{
this.props.navigation.navigate（'Welcome'）}
else{alert（JSON.stringify（“Merci de saisir des données convenables”）；}）
.catch（（错误）=>{console.error（错误）；}）
render（）{
返回(
用户名：
this.setState（{usermail}}/>
密码：
this.setState（{password}）}
/>
连接
);
}
}

我需要这样的东西！！如果你能帮助我，请

---

您需要设置加载状态。您可以在用户单击登录按钮后将其初始化为true，然后在从

fetch

获得响应后将其设置为false。您还需要确保登录模式在渲染方法中被激活（如果设置为true），然后在设置为false时被禁用，但是当username/pass-correct时我有问题没关系，当它不正确时我想返回表单页面，但我能得到的只是对话框I create-state with=true；然后当我按下按钮时，我变为false；在我的渲染中，我会检查它是否为false，我会显示对话框，否则会显示窗体