Spla sh Экран быстро становится белым на React Native Android - PullRequest
Новая
       29

Spla sh Экран быстро становится белым на React Native Android

0 голосов
/ 30 марта 2020

Я добавил экран spla sh в свое приложение. Экран spla sh загружается, но затем становится белым за 5 секунд до загрузки приложения. Я хочу, чтобы экран sh оставался включенным до тех пор, пока приложение не будет запущено.

enter image description here

Я пытался следовать ответу Сураджа на этот вопрос , но они не предложили никакого объяснения своего ответа, который не работает так, как написано по вопросу. Основная часть, которая не работает, это строка setContentView(R.layout.activity_splash);, которая выдает ошибку при попытке создать приложение. Когда я удаляю строку, мое приложение падает после установки

MainActivity. java

package com.sealsounds;

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import com.sealsounds.SplashActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "SealSounds";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent i = new Intent(this, SplashActivity.class);
        startActivity(i);
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

SplashActivity. java

package com.sealsounds;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;

public class SplashActivity extends ReactActivity {

    private static int SPLASH_TIME_OUT = 5000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                finish();
            }
        }, SPLASH_TIME_OUT);
    }
}

Ответы [ 2 ]

0 голосов
/ 01 апреля 2020

Я удалил код, который добавил в предыдущую реализацию, и начал заново с реализации экрана spla sh.

Эти инструкции изменены из документации по адресу act-native-spla sh -screen , вы можете перейти по этой ссылке, если вам также нужна инструкция для iOS

В командной строке выполните 

yarn add react-native-splash-screen

Edit MainActivity. java

...
//Splash Screen stuff
import android.os.Bundle; 
import org.devio.rn.splashscreen.SplashScreen;
// for react-native-splash-screen < 0.3.1 replace the line above with the line below
//import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainActivity extends ReactActivity {

    ...    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    ...
}

Создайте файл с именем launch_screen. xml в приложении / src / main / res / layout (создайте папку layout, если она не существует) , Содержимое файла должно быть следующим: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

создайте образ экрана запуска и назовите его launch_screen.png скопируйте его в следующие папки внутри android/app/src/main/res

drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

Добавить строка ниже вашего основного приложения. js file 

import SplashScreen from 'react-native-splash-screen'

Внутри вашего основного приложения. js class добавьте следующее к вашей функции ComponentDidMount () 

export default class App extends React.Component {
    ...
    componentDidMount() {
        SplashScreen.hide();
    }
    ...
}
0 голосов
/ 30 марта 2020

Итак, причина этой проблемы: 

 1. When  Javascript loads & the bridge is initialized.
 2. Then you see splash screen when the app is first booted up implemented on native side. 
 3. Now React Native initialize at that time we get a white
    screen for fraction of second

Вы можете следовать этой статье, чтобы добавить экран spla sh, это правильный способ реализации экрана spla sh screen spla sh -screen в реагирующими родной

...