Белый фон мигает при переключении экранов - React-Navigation v5 - PullRequest
Новая
       15

Белый фон мигает при переключении экранов - React-Navigation v5

1 голос
/ 24 января 2020

Я переношу проект RN версии 4 на 5.

При переключении экранов возникла проблема с мигающим белым фоном. В v4 это было решено установкой cardStyle: { backgroundColor: material.containerBgColor } в StackNavigation options.

Однако в v5 я не могу исправить это с помощью того же подхода:

<Stack.Navigator cardStyle={{ backgroundColor: material.containerBgColor }} ...>

White fla sh вернулся. Есть идеи как это исправить? Спасибо.

Обновление: структура навигации может иметь важное значение: 

const AppTabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={Home} />
    <Stack.Screen name="ScreenD" component={ScreenD} />
    <Stack.Screen name="ScreenE" component={ScreenE} />
    <Stack.Screen name="ScreenF" component={ScreenF} />
  </Tab.Navigator>
)
...
  <Stack.Navigator
    ...
    cardStyle={{ backgroundColor: material.containerBgColor }}
  >
    <Stack.Screen name="Home" component={AppTabNavigator} />
    <Stack.Screen name="ScreenA" component={ScreenA} />
    <Stack.Screen name="ScreenB" component={ScreenB} />
    <Stack.Screen name="ScreenC" component={ScreenC} />
  </Stack.Navigator>

Переход от ScreenD к ScreenE вызывает проблему с миганием. Я не уверен насчет других экранов, так как они не выполняют никаких сетевых запросов / asyn c.

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

Я столкнулся с той же проблемой и погрузился в расследование. Похоже, отрыв экранов обуславливает это. Я нашел несколько подходов. Вы можете выбрать один в соответствии с вашими потребностями. Они следующие:

  1. Вы можете указать оболочку вида навигатора с тем же цветом фона, что и на экранах, например: 

    <View style={{ flex: 1, backgroundColor: '#YOUR_SCREEN_COLOR' }}>
  // It could be your NavigationContainer or your StackNavigator depends on your goals 
  <Navigator /> 
</View>

  2. Вы также можете указать режим экрана modal в конфигурации стека, это предотвращает отсоединение экранов, например: 

    <StackNavigator.Navigator mode="modal">
  {/*.... Your stack screens ... */}
</StackNavigator.Navigator>

  3. Вы можете добавить свой пользовательский оверлей в screenOptions с помощью cardOverlay проп: 

    cardOverlay: () => (
  <View
    style={{
    flex: 1,
    backgroundColor: '#YOUR_COLOR',
  }}
/>)

    Ссылка: https://reactnavigation.org/docs/stack-navigator/#cardoverlay

  4. Вы можете использовать cardStyleInterpolator :

    Это позволяет настраивать переходы анимации при переходе с экрана на экран.

    Вот фрагменты оригинальной документации: 

    const forFade = ({ current, closing }) => ({
  cardStyle: {
    opacity: current.progress,
  },
});

    <Stack.Screen
  name="Profile"
  component={Profile}
  options={{ cardStyleInterpolator: forFade }}
/>

    Stack Navigator предоставляет различные параметры для настройки анимации перехода при добавлении или удалении экрана. .

    Ссылка: https://reactnavigation.org/docs/stack-navigator/#animation -связанные опции

0 голосов
/ 25 января 2020

cardStyle - это опция на экране, а не навигатор. 

<Stack.Navigator screenOptions={{ cardStyle: backgroundColor: material.containerBgColor }}>
  {/* ... */}
</Stack.Navigator>

Или 

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={AppTabNavigator}
    options={{ cardStyle: backgroundColor: material.containerBgColor }}
  />
  {/* ... */}
</Stack.Navigator>

Ссылка: https://reactnavigation.org/docs/en/next/stack-navigator.html#cardstyle

Вероятно, лучший способ - использовать систему тем для передачи цветов, а не указывать ее для каждого навигатора: https://reactnavigation.org/docs/en/next/themes.html

...