反应原生闪屏中的白屏问题 - Javascript

反应原生应用是基于React框架的手机应用程序，然而在应用启动时，许多用户都会遇到一个闪屏问题：在应用程序加载时，仅显示一个白屏并没有任何内容，这个问题严重抑制了用户的体验。这篇文章将向您介绍如何避免反应原生闪屏中的白屏问题。

问题分析

一般而言，我们不会遇到该应用和代码中的白屏问题，因为这个问题来自本地导航和主机（特别是iOS）页面的过渡，而 iframe、本地存储和应用时的登录都可能出现这个问题。在iOS设备上，控制器初始化和界面构建很慢，因此导致白屏问题。

解决方案

以下是React框架中实现解决措施的步骤。

1. 渲染一个占位符

根据React Native的文档，在App启动时，在index.js文件中，我们可以使用组件进行渲染，并在初始化先预先使用一个 container 或者 loading 组件作为占位符，渲染时配置成 dimmed 或 skeleton 等样式，以便在数据加载完成前占据整个屏幕。

import React from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';

const Placeholder = () => (
  <View style={styles.container} />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f1f1',
  },
});

AppRegistry.registerComponent('App', () => Placeholder);

2. 异步加载主界面

当占位符渲染完成之后，React Native应用程序就可以开始异步加载主界面了，使用顶级Navigator作为主机进行管理，最后在这个Navigator组件中渲染App组件。

import {Navigator} from 'react-native-deprecated-custom-components';
import Placeholder from './Placeholder';
import App from './App';

class Root extends Component {

  state = {
    loaded: false,
  }

  async componentWillMount() {
    //使用Promise模拟异步加载
    this.setState({
      loaded: new Promise((resolve) => {
        setTimeout(() => resolve(), 3000);
      })
    });
  }

  render() {
    const { loaded } = this.state;

    //如果loaded没有resolve成功的话，就渲染占位符组件Placeholder
    if (!loaded) {
      return <Placeholder />;
    }

    //异步加载完成后，渲染App组件
    return (
      <Navigator initialRoute={{ name: 'App', component: App }} />
    );
  }
}

AppRegistry.registerComponent('App', () => Root);

3. 避免重复渲染

当我们使用内置的导航来处理不同的页面时，要注意避免重复渲染。我们常常需要从加载页面中获取数据并填充表单、视频目录，或渲染一个类似的硬件设备简介。在这种情况下，我们可以使用ComponentLifecycle中的shouldComponentUpdate方法钩子。这个方法用于决定是否进行更新，并且如果没有更新，则不放置渲染。

import React, { PureComponent } from 'react';
import { View } from 'react-native';

class App extends PureComponent {

  state = {
    loaded: false,
  }

  componentDidMount() {
    //模拟异步加载
    setTimeout(() => this.setState({ loaded: true }), 3000);
  }

  shouldComponentUpdate() {
    return true;
  }

  render() {
    const { loaded } = this.state;

    if (!loaded) {
      return <View />;
    }

    return (
      <View />
    );
  }
};

export default App;

总结

React Native的闪烁问题是一件让人头疼的事情。以下是从React Native文档中收集的关于这个名称的一些高层级策略。首先，应该尽可能地减少 JavaScript、Native、网络等环境中出现问题引起的潜在延迟问题。其次，建议使用尽量少的依赖库，使用PureComponent来做性能优化。最后，在渲染页面的时候，请一定注意避免有可能引起页面闪屏的问题，并且请使用一些技巧来认真处理这个问题。