Question

我正在使用以下代码段在侧面菜单中注销。单击注销按钮时，它将显示一个加载程序，然后注销。

我想在显示警报后添加一个加载器。我该如何实现？

navigateToLogin = props => {
  Alert.alert(
    "Logout",
    "Are you sure you want to logout?",
    [
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      {
        text: "OK",
        onPress: () => {
          getCSRFToken(props);
          console.log("5");
        }
      }
    ],
    { cancelable: false }
  );
};

function getCSRFToken(props) {

  AsyncStorage.getItem("USERINFO", (err, res2) => {
    if (res2) {
      let value = JSON.parse(res2);
      getAccessToken(value.csrf_token, props);
      console.log("4");
    } else {
      alert("Your session is expired.");
    }
  });
}

function getAccessToken(csrf_token, props) {

  AsyncStorage.getItem("AccessToken", (err, accessToken) => {
    if (accessToken) {
      logoutFromApp(accessToken, csrf_token, props);
      console.log("3");
    }
  });
}

async function logoutFromApp(authToken, csrf_token, props) {
  const navigateAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: "LoginTeacher" })]
  });
  console.log("1");
  await axios
    .post(
      "https://abcd.com/logout",
      {},
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: authToken,
          "X-CSRF-Token": csrf_token
        }
      }
    )
    .then(response => {
      alert("LO");
      AsyncStorage.removeItem("USERINFO");
      AsyncStorage.removeItem("AccessToken");
      props.navigation.dispatch(navigateAction);
    })
    .catch(err => {
      console.log("2");
      AsyncStorage.removeItem("USERINFO");
      AsyncStorage.removeItem("AccessToken");
      props.navigation.dispatch(navigateAction);
     // alert(JSON.stringify(err));
    });
}

我尝试使用this.setState({ isLoading: false });，但这没有用。我可以知道如何获得装载机吗？

Answer 1

[params.palette]
    primary = "red" //I do change this to blue, yellow or green.
    accent  = "teal"

Answer 2

u可以使用ActivityIndicator或加载程序react-native-loading-spinner-overlay的任何软件包，并基于此管理状态。

'use strict';

import React, { Component } from 'react';
import { Text, View, Alert, AsyncStorage, TouchableOpacity } from 'react-native';
import styles from '../../public/styles/sideBarStyle';
import Spinner from 'react-native-loading-spinner-overlay';

class SideBar extends Component {

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

    isLoader(isLoading) {
        return (
            <View>
                <Spinner visible={isLoading} color={'Blue'} />
            </View >
        )
    }

    navigateToLogin = props => {
        Alert.alert(
            "Logout",
            "Are you sure you want to logout?",
            [
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                {
                    text: "OK",
                    onPress: () => {
                        getCSRFToken(props);
                        console.log("5");
                    }
                }
            ],
            { cancelable: false }
        );
    };

    getCSRFToken(props) {
        AsyncStorage.getItem("USERINFO", (err, res2) => {
            if (res2) {
                let value = JSON.parse(res2);
                getAccessToken(value.csrf_token, props);
                this.setState({ isLoading: true });
                console.log("4");
            } else {
                alert("Your session is expired.");
            }
        });
    }

    getAccessToken(csrf_token, props) {

        AsyncStorage.getItem("AccessToken", (err, accessToken) => {
            if (accessToken) {
                logoutFromApp(accessToken, csrf_token, props);
                console.log("3");
            }
        });
    }

    async  logoutFromApp(authToken, csrf_token, props) {
        const navigateAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: "LoginTeacher" })]
        });
        console.log("1");
        await axios
            .post(
                "https://abcd.com/logout",
                {},
                {
                    headers: {
                        "Content-Type": "application/json",
                        Authorization: authToken,
                        "X-CSRF-Token": csrf_token
                    }
                }
            )
            .then(response => {
                alert("LO");
                this.setState({ isLoading: false });
                AsyncStorage.removeItem("USERINFO");
                AsyncStorage.removeItem("AccessToken");
                props.navigation.dispatch(navigateAction);
            })
            .catch(err => {
                console.log("2");
                this.setState({ isLoading: false });
                AsyncStorage.removeItem("USERINFO");
                AsyncStorage.removeItem("AccessToken");
                props.navigation.dispatch(navigateAction);
                // alert(JSON.stringify(err));
            });
    }

    render() {
        let { isLoading } = this.state;

        return (
            <View style={[styles.container]}>
                {isLoader(isLoading)}
                <TouchableOpacity onPress={() => this.navigateToLogin()}>
                    <View style={styles.sideBoxLogout}>
                        <Text style={styles.sideBoxTextLogout}>Logout</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}
export default SideBar;

如何在React Native中为注销屏幕添加加载器？

2 个答案: