react-native 或 iOS iphone App Webview Splash image

Question

我的目标是在我的 Webview url 完全加载之前显示启动画面。它是本机应用程序，但我想对 iOS 的任何建议也可以。这可能吗？

Answer 1

要在应用加载时显示启动画面，您可以在 Github 上查看此项目：react-native-splashscreen。

这可以使用 npm 安装：

npm install react-native-splashscreen --save

用法：

'use strict';
var React = require('react-native');
var {
    AppRegistry,
    View,
    Text,
} = React;
var SplashScreen = require('@remobile/react-native-splashscreen');

var SplashViewApp = React.createClass({
    componentDidMount: function() {
        SplashScreen.hide();
    },
    render() {
        return(
            <View>
                <Text>
                   Lorem Ipsum..
                </Text>
            </View>
        );
    }
});

AppRegistry.registerComponent('SplashViewApp', () => SplashViewApp);

否则使用react-native-loading-spinner-overlay 之类的东西。通过以下方式安装：

npm install --save react-native-loading-spinner-overlay

如下使用：

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

import Spinner from 'react-native-loading-spinner-overlay';

class MyComponent extends React.Component {

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

  /* eslint react/no-did-mount-set-state: 0 */
  componentDidMount() {
    setInterval(() => {
      this.setState({
        visible: !this.state.visible
      });
    }, 3000);
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Spinner visible={this.state.visible} />
      </View>
    );
  }
}