React Native Android应用闪屏持续显示问题排查及解决方案

你的问题核心其实是异步请求中this指向错误导致setState执行失败，进而阻塞了应用初始化流程，让闪屏一直停留在界面上。下面一步步拆解问题和解决办法：

问题根源 #

你最初的GetAllProducts方法里，使用普通function作为axios的then回调，此时函数内部的this并不指向React组件实例，调用this.setState会直接报错。但因为你没有添加catch错误捕获，这个错误被静默吞掉了——组件一直无法完成数据加载状态更新，闪屏也就没法正常消失。

两种可靠的解决方法 #

方法1：使用箭头函数（推荐） #

箭头函数会自动继承外层作用域的this，能直接访问组件实例的setState方法，代码更简洁：

GetAllProducts() {
  axios.get('https://categoriesexpress444.herokuapp.com/getallproducts')
    .then((response) => {
      this.setState({ products: response.data });
    })
    .catch((error) => {
      alert(error.message);
    });
}

方法2：保存this到临时变量 #

就像你自己摸索出的临时方案一样，把组件实例的this赋值给一个变量，在回调里用这个变量调用setState：

GetAllProducts() {
  let that = this;
  axios.get('https://categoriesexpress444.herokuapp.com/getallproducts')
    .then(function (response) {
      that.setState({ products: response.data });
    })
    .catch(function (error) {
      alert(error.message);
    });
}

额外优化建议 #

1. 强制添加错误捕获：所有异步请求都要加catch，否则静默错误会让排查变得异常困难；
2. 闪屏时机控制：如果用了react-native-splash-screen，建议在状态更新完成后（或请求失败时）手动隐藏闪屏，确保流程闭环：

.then((response) => {
  this.setState({ products: response.data }, () => {
    // setState回调确保状态更新完成后再隐藏闪屏
    SplashScreen.hide();
  });
})
.catch((error) => {
  alert(error.message);
  // 请求失败也要隐藏闪屏，避免界面卡住
  SplashScreen.hide();
});

内容的提问来源于stack exchange，提问作者Mobygo