react-native - 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

我通过修改 forSlide 设法做到了这一点。 cardStyleInterpolator 中的示例来自 documentation 的示例.
修改后的插值器如下所示:

const forSlide = ({ current, next, inverted, layouts: { screen } }) => {
  const progress = Animated.add(
    current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    }),
    next
      ? next.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
          extrapolate: 'clamp',
        })
      : 0
  );

  return {
    cardStyle: {
      transform: [
        {
          translateX: Animated.multiply(
            progress.interpolate({
              inputRange: [0, 1, 2],
              outputRange: [
                screen.width,
                0,
                screen.width * -1, // change the coefficient here
              ],
              extrapolate: 'clamp',
            }),
            inverted
          ),
        },
      ],
    },
  };
};

它的作用是将前一个屏幕向左移动 30%，而不是将其向左移动一个全屏宽度。
然后我就通过了 forSlide用作 cardStyleInterpolator screenOptions 内的字段 Stack.Navigator的 Prop .

<Stack.Navigator
    {...otherNavigatorProps}
    screenOptions={{
        headerShown: false,
        cardStyle: {
            backgroundColor: 'transparent',
        },
        cardStyleInterpolator: forSlide,
    }}
>