我正试图制作启动画面,但它没有显示任何方式
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>
);
}
}
答案 0 :(得分:0)
你可以像这样制作一个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>
)
}
}