Мне было интересно, как решить запуск экрана, который, предположим, появится несколько секунд, а затем заменяется другим представлением?
Я хотел бы использовать это, когда приложение запускается в первый раз и охватывает некоторые сети.
Мне было интересно, как решить запуск экрана, который, предположим, появится несколько секунд, а затем заменяется другим представлением?
Я хотел бы использовать это, когда приложение запускается в первый раз и охватывает некоторые сети.
Вот как я решил экран загрузки. Я работал с Компонентом Навигатора.
В моем index.android.js
я установил initialRoute
для моего класса SplashPage/SplashScreen, а затем там я установил таймаут, который ссылается на MainView, к которому вы хотите перейти через определенное время.
Мой навигатор в index.android.js:
<Navigator
initialRoute={{id: 'SplashPage'}}
renderScene={this.renderScene}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.HorizontalSwipeJump;
}}
/>
Мой начальный класс:
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) Сделайте все из this, но не создавайте SplashActivity.
2) Все, что вам нужно сделать сейчас, это установить тему MainActivity в SplashTheme.
В том случае, когда MainActivity загружает его, показывая его тему, но после того, как он заменит React-Native.
Мне удалось сделать это таким образом, который выглядит как самый простой и требует меньше ресурсов:
Создайте всплывающие изображения для разных разрешений. Я использовал ионные ресурсы, чтобы генерировать все размеры из файла PSD. Вам необходимо создать временный ионный проект с ionic start
, отредактировать файлы PSD внутри/ресурсы и запустить ionic resources
.
Поместите их в соответствующую папку в app/src/main/res/mipmap-xxx, с именем ic_splash.png
Создайте приложение /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 android:drawable="@android:color/black"/>
до выше <item>
. Цвет действительно не имеет значения, если ваше изображение с заставкой не имеет прозрачности.
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash</item>
</style>
android:theme="@style/SplashTheme"
Это является правильным способом.
Использование атрибута windowBackground
должно избегать всех артефактов пользовательского интерфейса, которые вы могли бы сделать, если бы вы использовали старый стиль (запуск активности, которая выполняется в течение определенного времени)
вот решение, вы можете настроить заставку с анимацией просмотра, используя экранную навигацию
import 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>
);
} }