React native 如何在react native中显示加载图标，直到在react native中显示API响应？

我正在创建一个新的应用程序。点击提交按钮后，我想在登录页面中显示加载图标，直到API响应。请帮助我首先创建一个状态变量，用于显示和隐藏加载程序，如下所示

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

在请求发送之前的api调用中，可以将加载状态设置为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%"
    }

...
});