Прозрачные фоны для экранов в React Navigation 5.x

Question

Я пытаюсь использовать один и тот же фон для каждого экрана в приложении ios / android, не перемещая его при переходе между экранами. В React Navigation 4 было такое решение: Как установить фоновое изображение с помощью встроенной и реагирующей навигации? :

const AppNavigator = createAppContainer(
  createStackNavigator(
    {
      Home: {screen: Home},
      Vocabulary: {screen: Vocabulary},
      AddWord: {screen: AddWord},
    },
    {
      initialRouteName: 'Home',
      headerMode: 'none',
      cardStyle: {backgroundColor: 'transparent', shadowColor:'transparent'},
      transparentCard: true, 
      transitionConfig: () => ({
        containerStyle: {
          backgroundColor: 'transparent',
        },
      }),
    },
 ),
);

Но теперь в версии 5 все изменилось! Вы можете сделать это:

<Stack.Screen
  name="Screen2"
  component={Screen2}
  options={{
    cardStyle: {
      backgroundColor: 'transparent',
    },
    cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS
  }}
/>

Вы должны сделать это на каждом экране (что хорошо, хотя и неудобно), но затем, когда вы переходите на новый экран, предыдущий экран просто перемещается примерно на 25% внизу, так что он все еще виден, хотя немного отклонен в сторону. Это выглядит очень неловко:

Итак, я подумал об использовании функции cardStyleInterpolator (как описано здесь: https://reactnavigation.org/docs/en/stack-navigator.html#navigationoptions -used-by-stacknavigator ), однако он позволяет возвращать стили только для следующих элементов:

containerStyle - Style for the container view wrapping the card.
cardStyle - Style for the view representing the card.
overlayStyle - Style for the view representing the semi-transparent overlay below
shadowStyle - Style for the view representing the card shadow.

, а не для предыдущей карты.

Как мне сделать это просто сдвинуться и освободить место для новых элементов, сохраняя при этом стабильный фон?

Answer 1

Прежде всего вам не нужно указывать цвет для каждого экрана, вы можете просто добавить cardStyle к вашему Navigator, например: <Stack.Navigator screenOptions={{ cardStyle: { backgroundColor: 'red' }}} > , и он придаст цвет всем вашим экранам под этим Navigator!

что касается 25% предыдущего экрана, потому что у вас включена прозрачность для каждого экрана. если вы просто установите цвет в вашем Stack.Navigato r, он справится с обеими вашими проблемами!