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!
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 :)
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.
Postępuj zgodnie z tym samouczkiem, aby skonfigurować ekran powitalny dla systemu Android i iOS (doskonały samouczek) – Konfiguracja ekranu React Native Splash
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.
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
dodajstatus_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 toSplashTheme
- 3.1. W swoim
Dostarczenie komentarzy referencyjnych do powyższego rozwiązania:
Mam nadzieję, że to pomoże. Pozdrawiam!
Podobne pytania
Nowe pytania
android
Android to mobilny system operacyjny Google, używany do programowania lub tworzenia urządzeń cyfrowych (smartfony, tablety, samochody, telewizory, Wear, Glass, IoT). W przypadku tematów związanych z Androidem użyj tagów specyficznych dla Androida, takich jak android-intent, android-activity, android-adapter itp. W przypadku pytań innych niż programowanie lub programowanie, ale związanych ze strukturą Androida, użyj tego linku: https: // android.stackexchange.com.
app.js
. Dziękuję