Question

我正试图制作启动画面，但它没有显示任何方式

App:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image,Button,backgroundImage, Dimensions } from 'react-native';
import { Constants } from 'expo';
import Box from './src/box';
import splash from './src/splash'
//import ImagesExample from './ImagesExample.js'

export default class App extends React.Component {

componentWillMount() {
        setState = {
            View : <splash />
        };


        setTimeout(() => {
            //IF FALSE NAVIGATE TO ERROR
            if(true) {
                this.setState({
                    View : <splash/>
                })
            } else {
                this.setState({
                    View : <splash/>
                })
            }
        }, 2000) //TIME OF WAITING


    }

  render() {
    return (
      <View style={{flex: 1,justifyContent: 'center',}}>

       <Image
                  source={require('./assets/hamburger.png')}
                  resizeMode="cover"
                  style={styles.background}
                >
                </Image>

      <View style={{justifyContent: 'center',flex:5}}>

splash:

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

export default class splash extends React.Component {

   render() {
       return (


<View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#34495e'}}>

                <Text style={{ color : 'white',fontSize : 18 }}>Hello Splash</Text>
                <ActivityIndicator color={'white'}/> //YOUR SPINNER WAITING
            </View>


       );
   }
}

Answer 1

你可以像这样制作一个Splash：

export default class SplashScreen extends Component {
    constructor(props) {
        super(props, context);
        this.state = {
        }
    }

    handleSplash = () => {
        setTimeout(() => {
            //navigate to Home page
        }, 2500)
    }

    componentDidMount() {
        this.handleSplash()
    }

    render() {
        return (
            <View style={{ backgroundColor: 'white' }}>
                <Text>Splash</Text>
            </View>
        )
    }
}

为什么闪屏不显示反应原生？

1 个答案: