enter image description here

Próbuję dodać ekran powitalny do aplikacji RN. Jak widać na gif, kolor paska stanu zmienia się na czarny, gdy ekran powitalny jest włączony, ale nie mogę dokładnie znaleźć problemu. Postępowałem zgodnie z tym samouczkiem, aby zaimplementować ekran powitalny: Dodaj ekran powitalny do aplikacji RN Tutaj znajdziesz kod, który dodałem do Android Studio:

Za AndroidManifest.xml = & gt;

<activity
            android:name="MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:windowSoftInputMode="adjustResize"
            android:launchMode="singleTop"
            android:screenOrientation="portrait"
            android:exported="true"
            />

        <activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
            </intent-filter>
        </activity>

Za styles.xml = & gt;

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->

    <!-- Add the following line to set the default status bar color for all the app. -->
    <item name="android:statusBarColor">@color/mdcGreen</item>
    <!-- Add the following line to set the default status bar text color for all the app
    to be a light color (false) or a dark color (true) -->
    <item name="android:windowLightStatusBar">false</item>
    <!-- Add the following line to set the default background color for all the app. -->
    <item name="android:windowBackground">@drawable/background_splash</item>
</style>

<!-- Adds the splash screen definition -->
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:statusBarColor">@color/mdcGreen</item>
    <item name="android:background">@drawable/background_splash</item>
</style>

</resources>

Za drawable/background_splash.xml = & gt;

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/mdcGreen"/>

    <item
        android:width="200dp"
        android:height="200dp"
        android:drawable="@mipmap/mdc"
        android:gravity="center" />

</layer-list>

Za layout/launch_screen.xml = & gt;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/background_splash"
    android:statusBarColor="@color/mdcGreen">

</LinearLayout>

DZIĘKI!

1
B. Mohammad 20 listopad 2019, 14:04
Dodaj do szablonu
 – 
Ajith
20 listopad 2019, 14:26
Zrobiłem już w app.js. Dziękuję
 – 
B. Mohammad
21 listopad 2019, 16:56

2 odpowiedzi

Zamiast korzystać z Biblioteki ekranu powitalnego, co można zrobić, zrobić prosty komponent dla ekranu powitalnego oraz w funkcji componentDidMount(), możesz przejść do innego ekranu, który pojawi się po powitaniu. W tym przypadku masz pełną kontrolę nad splashem i jest on wysoce konfigurowalny. Nie musisz też dodawać dodatkowej biblioteki do powitania.

Przykładowy kod do implementacji SplashScreen.js

componentDidMount() {
    setTimeout(() => this.NavigateToNextScreen(), 4000)
}

NavigateToNextScreen(){
    // code for navigation to next screen according to your requirement    
}

Na koniec dostosuj pasek stanu w funkcji renderowania ekranu powitalnego, ponieważ RN zapewnia element paska stanu do implementacji powitania

<StatusBar
  hidden={true}
  backgroundColor={'<your color>'}
  barStyle='light-content'
/>

Nie zapomnij zaimportować go z natywnego modułu React

import { StatusBar } from 'react-native'

Mam nadzieję, że to pomoże ... dzięki :)

-1
abhikumar22 20 listopad 2019, 14:17
Dzięki za radę, rozumiem twoją troskę o utrzymanie kontroli i nieużywanie bibliotek dla każdego napotkanego problemu, ale na razie nie mogę się cofnąć, ponieważ wierzę, że potrzebuję tylko jakiegoś atrybutu / wartości gdzieś w plikach xml Androida. dzięki jeszcze raz.
 – 
B. Mohammad
20 listopad 2019, 14:27

Po odrobinie googlowania znalazłem rozwiązanie problemu. Poniżej przedstawiono kroki, które wykonałem, aby skonfigurować ekran powitalny w aplikacji na Androida, a także rozwiązać pośredni problem z czarnym paskiem stanu, który pojawia się między natywnym ekranem powitalnym a ładowaniem JavaScript.

  1. Postępuj zgodnie z tym samouczkiem, aby skonfigurować ekran powitalny dla systemu Android i iOS (doskonały samouczek) – Konfiguracja ekranu React Native Splash

  2. Po wykonaniu powyższego samouczka i zakończeniu konfiguracji należy zwrócić uwagę. W powyższym artykule autor mówi o renderowaniu ImageView w LinearLayout oraz o tym, jak uniknąć problemów z przeskakiwaniem podczas przełączania ekranu powitalnego, ustawiając android:layout_marginTop na 24dp. Jest na to poprawka, której użyłem i w moim przypadku działałem doskonale. Wykonaj poniższe czynności, aby uniknąć twardego kodowania:

    • 2.1. Zastąp swój układ/launch_screen.xml poniższym:

            
    • 2.2. Zauważ, że w powyższym LinearLayout android:background jest zastąpiony przez @drawable/background_splash.

    • 2.3. Upewnij się, że w pliku styles.xml SplashTheme znajduje się element android:background:
      @drawable/background_splash  
    • 2.4. Pomoże to utrzymać ikonę na środku ekranu powitalnego. Czytaj dalej, aby rozwiązać problem z paskiem stanu.
  3. Wykonaj poniższe czynności, aby rozwiązać pośredni problem z czarnym paskiem stanu.

    • 3.1. W swoim android/app/src/main/res/values/colors.xml dodaj status_bar_color:
            #fff      #fff          
    • 3.2. Utwórz dla tego definicję stylu (lub dodaj do istniejącego) w android/app/src/main/res/values/styles.xml:
                       
    • 3.3. W pliku MainActivity.java zmień metodę show, aby uwzględnić własny styl:
       SplashScreen.show(this, R.style.SplashTheme);  
    • Uwaga: symbol po R.style. powinien odpowiadać nazwie motywu w styles.xml. W tym przykładzie nazwa motywu to SplashTheme

Dostarczenie komentarzy referencyjnych do powyższego rozwiązania:

Mam nadzieję, że to pomoże. Pozdrawiam!

1
Himanshu Sharma 18 czerwiec 2020, 20:17