如何在反应原生中显示加载图标，直到反应原生的API响应？

Question

我正在创建一个新应用。点击提交按钮后，我想在登录页面中显示加载图标，直到 API 响应。请帮帮我

Answer 1

首先创建一个用于显示和隐藏loader的状态变量，如下所示

this.state = {
..
loading: false, 
..
};

在请求发送前的api调用中，可以设置loading状态为true，完成响应后设置为false

getData() {

  this.setState({loading:true});// For showing loader
  axios.get('api_link_goes_here')
  .then(response => {
    this.setState({loading:false});// For hiding loader
    console.log(response.data);
  })
  .catch(error => {
    this.setState({loading:false});// For hiding loader
    console.log(error);
  });
}

在您的渲染模板中，您可以添加一个基于状态显示加载器的视图，您可以将其添加到底部和位置并使其全屏以避免进一步点击，直到收到响应

render() {
    return (
<View style={container}> 
.....

{this.state.loading === true &&
  <View style={styles.myloader}>
    <CustomLoader /> // You can define this in another component or simply write <Text>Please wait...</Text>
  </View>
}

....
</View> 
)}

下面给出了加载器容器的样式

const styles = StyleSheet.create({
.....

    myloader: {
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: 10,
        backgroundColor: "#ffffff",
        opacity: 0.9,
        justifyContent: 'center',
        alignItems: 'center',
        width: "100%",
        height: "100%"
    }

...
});