【问题标题】:why splash screen not showing in react native?为什么闪屏没有在本机反应中显示?
【发布时间】:2018-06-12 12:07:59
【问题描述】:

我正在尝试制作启动画面,但它没有显示任何方式

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>


       );
   }
}

【问题讨论】:

  • 你能澄清你的问题并删除重复的句子吗?相反会发生什么?您尝试过什么调试问题?
  • 什么也没发生,它只是从 app.js 运行应用程序,它跳过了启动屏幕,我是不是忘记了什么?

标签: react-native splash-screen


【解决方案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>
        )
    }
}

【讨论】:

  • 我应该在 app.json 上公布它吗?
  • 您不需要编辑 app.json。您可以使用 app.js (index.js) 作为启动画面或创建一个新文件并从 app.js (index.js) 调用它。当此页面启动时,它将在 2.5 秒后导航到主屏幕。如果您需要更多信息,请告诉我:)
  • 我如何从应用程序/索引调用它(启动屏幕)并在 2.5 秒后返回到应用程序/索引?我需要在那里写什么?
  • 有些软件包可以控制您的应用导航。通过使用这个包,你可以午餐一个新的屏幕或制作标签栏或抽屉导航。其中之一是我正在使用的reactnavigation.org..
猜你喜欢
  • 2021-11-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-09
相关资源
最近更新 更多