React Navigation 5.x中屏幕的透明背景

Question

我正在尝试为ios / android应用程序中的每个屏幕使用相同的背景，而在屏幕转换时不让其移动。在React Navigation 4中有以下解决方案：How to set background image with react native and react navigation?：

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中设置颜色，则可以解决两个问题！