Белое мерцание при переходе на новый экран и фон темного цвета?

Question

Я испытываю это при переходе на один экран к другому с двумя разными навигаторами: бывшая навигация и новая React Navigation . Белое мерцание на секунду (или полсекунды). В поисках решения я обнаружил, что у других навигаторов такая же проблема. Например навигатор от wix ЗДЕСЬ. По ссылке:

Хорошо, проблема в том, что стили React применяются после начала навигации, и по умолчанию backgroundColor имеет белый цвет, так что это эффект мерцания.

У кого-то такая же проблема?

Answer 1

Я решил проблему белого мерцания, установив свойство в NavigationContainer в React-Navigation v5.

      <NavigationContainer theme={{ colors: { background: '#000' } }}>
{...}
</NavigationContainer>

Это помогло мне удалить белое мерцание, когда я обновил цвет так же, как мой цвет фона ЧЕРНЫЙ.

https://github.com/software-mansion/react-native-screens/issues/380#issuecomment-748038449

Answer 2

Для меня это сработало:

cardStyle: { opacity: 1 }

Answer 3

Я знаю, что пишу здесь слишком поздно, но да, если кому-то это поможет, то это того стоит.

Я также столкнулся с той же проблемой, потому что я использовал темную тему для своего проекта, и всякий раз, когда происходила навигация, белый экран мигал в течение нескольких миллисекунд.

Я решил эту проблему, добавив тот же цвет фона темы в опору темы NavigationContainer, как показано ниже.

<NavigationContainer theme ={{colors:{background: /*same background color of your project */}}}> .... </NavigationContainer>

Это решило мою проблему, надеюсь, она решит и другие.

Спасибо..

Answer 4

Для людей, использующих expo, вам также необходимо пройти backgroundColor в твоей app.json. Поэтому вы должны установить для него какой-то темный цвет из цветовой схемы вашего приложения.

      // app.json

{
  "expo": {
    ...
    "backgroundColor": "#1a202c"
  }
}

Answer 5

При использовании DrawerNavigator и StackNavigator необходимо:

cardStyle: {
    backgroundColor: 'transparent',
},

и нужно:

использовать https://github.com/johniak/react-native-root-view-background для setRootViewBackgroundColor("черный")

Answer 6

Я создал машинописный текст cardStyleInterpolator функция на основе scaleFromAndroid для предотвращения появления пробелов вокруг экрана при переключении экранов.

Эта функция удаляет opacity: 0 и конец перехода и добавляет overlayStyle к границе экрана при переключении между экранами.

Пример:

Answer 7

Для меня решением было установить layoutвариант. Я использую wix-react-native-navigation:

          layout: {
      backgroundColor: "#000",
      componentBackgroundColor: "#000",
    },

Answer 8

Вы можете установить цвет фона в вашем навигаторе следующим образом:

<
Navigator style={{flex: 1}} 
  transitionerStyle={{backgroundColor: 'black'}} ...

Надеюсь это поможет-

Answer 9

У меня была такая же проблема. И мне кажется, что есть два решения для этого.

• Первое решение приходит по ссылке, которой вы делитесь. В основном вы можете добавить цвет фона к вашему Navigator составная часть.

• Второе решение, которое я применил к своему проекту ранее, это не точное решение, а обходной путь. Я изменил как Navigator Компоненты переходов экраны назад и вперед путем изменения SceneConfigs, от Navigator.SceneConfigs.FloatFromRight в Navigator.SceneConfigs.PushFromRight, Так что мой Navigator компонент становится чем-то вроде;

          <Navigator
              ref={(ref) => this._navigator = ref}
              configureScene={(route) => {
                  return {
                      ...Navigator.SceneConfigs.PushFromRight,
                      gestures: {}
                  };
              }}
              initialRoute={{
                  id: (Platform.OS === "android" || Platform.OS === "ios") ? 'splashscreen' : 'login',
                  statusBarHidden: true
              }}
              renderScene={this.renderScene}
          />
  

Answer 10

Ни один из приведенных выше ответов не помог мне. Для iOS я изменил цвет фона в AppDelegate.m

      if (@available(iOS 13.0, *)) {
rootView.backgroundColor = [UIColor blackColor]; ---> changed this
} else {
rootView.backgroundColor = [UIColor blackColor]; ---> and this
}

Для Android: (это не идеально, после заставки некоторое время отображается черный экран. Моя тема была темной, поэтому все было хорошо.) В MainActivity.java,

      @Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, true); ---> added true here
super.onCreate(savedInstanceState);
}

В стилях.xml,

      <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowDisablePreview">true</item>
</style>