我在想如何解决一个启动屏幕的问题,比如它出现了几秒钟,然后被其他视图所替换?
当应用程序第一次启动并需要进行一些网络操作时,我想使用它。
我在想如何解决一个启动屏幕的问题,比如它出现了几秒钟,然后被其他视图所替换?
当应用程序第一次启动并需要进行一些网络操作时,我想使用它。
这是我解决加载屏幕问题的方式。我使用了Navigator Component。
在我的index.android.js
文件中,我将initialRoute
设置为我的SplashPage/SplashScreen类,然后在那里设置了一个超时链接到您想要跳转到的MainView。
我的index.android.js文件中的Navigator:
<Navigator
initialRoute={{id: 'SplashPage'}}
renderScene={this.renderScene}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.HorizontalSwipeJump;
}}
/>
我的 initialRoute 类:
class SplashPage extends Component {
componentWillMount () {
var navigator = this.props.navigator;
setTimeout (() => {
navigator.replace({
id: 'MainView', <-- This is the View you go to
});
}, 2000); <-- Time until it jumps to "MainView"
}
render () {
return (
<View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}>
<Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image>
</View>
);
}
}
module.exports = SplashPage;
编辑
这可能会更有趣,因为它是“原生”的 ;) https://github.com/crazycodeboy/react-native-splash-screen
已经解决了这个问题。
需要做的是:
1) 按照这里的方法进行设置,但不要创建SplashActivity。
2) 现在需要做的就是将MainActivity主题设置为SplashTheme。
问题在于,当MainActivity加载时,它会显示其主题,但在加载React-Native内容后,其主题将被替换。
SplashActivity
类的内容? - Noitidart创建不同分辨率的闪屏图片。我使用 ionic resources 从 PSD 文件生成了所有尺寸。您需要创建一个临时的 Ionic 项目,使用 ionic start
命令,编辑 /resources 中的 PSD 文件,然后运行 ionic resources
。
将它们放在 app/src/main/res/mipmap-xxx 目录下的适当文件夹中,命名为 ic_splash.png。
创建 app/src/main/res/drawable/splash.xml 文件,并添加以下内容:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/ic_splash"/>
</item>
</layer-list>
注意:看起来有些人需要在位图项下方添加颜色,因此只需在上面的 <item>
之前添加 <item android:drawable="@android:color/black"/>
即可。除非您的闪屏图片具有透明度,否则颜色并不重要。
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash</item>
</style>
android:theme="@style/SplashTheme"
。<item android:drawable="@android:color/black"/>
。 - gusgardimport React, { Component } from 'react'; import { View, Text, Animated,
Easing} from 'react-native';
export default class SplashPage extends Component {
constructor() {
super();
this.RotateValueHolder = new Animated.Value(0);
setTimeout(() => {
this.props.navigation.replace('login')
}, 5000);
}
componentDidMount() {
this.StartImageRotate();
}
StartImageRotate() {
this.RotateValueHolder.setValue(0);
Animated.timing(this.RotateValueHolder, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
}).start(() => this.StartImageRotate());
}
render() {
const RotateImage = this.RotateValueHolder.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
return (
<View style={{
flex: 1, backgroundColor: 'gray', alignItems: 'center',
justifyContent: 'center'
}}>
<Animated.Image
style={{
width: 250,
height: 250,
transform: [{ rotate: RotateImage }],
}}
source={{ uri:'someurl.png' }}
/>
</View>
);
} }
这是正确的方法。
利用windowBackground
属性应该可以避免您使用旧样式(启动运行一定时间的活动)时可能出现的所有UI工件。