React Native Stack导航：如何移除页面切换时的变暗效果

问题描述 #

我使用React Native Navigation进行页面导航，跳转或返回页面时，默认会将当前页面变暗（降低透明度），同时显示左右滑动的切换动画以聚焦目标页面。我喜欢左右滑动的动画，但不希望出现变暗效果，因为这会在Header处产生折痕。请问如何在React Navigation的Stack导航中移除页面切换（navigate/goBack）时的变暗效果？

用户提供的代码示例：

<View style={{flex: 1, backgroundColor: 'blue', marginTop: 50}}>
      <View style={{justifyContent: 'center', alignItems: 'center'}}> {/* header */}
        <View
          style={{
            position: 'absolute',
            top: -25,
            width: '25%',
            backgroundColor: theme.primary,
            height: 7,
            borderRadius: 10,
            zIndex: 1,
          }}
        />
      </View>
      <AddNavigator.Navigator
        screenOptions={{
          headerShown: false,
          gestureEnabled: false,
          contentStyle: {
           
          },
        }}>
        <AddNavigator.Screen
          name={APP_MODAL.a}
          component={Ascreen}
        />
        <AddNavigator.Screen
          name={APP_MODAL.b}
          component={BScreen}
        />
      </AddNavigator.Navigator>
    </View>

导航时Header处会出现折痕，需移除该变暗效果。

解决方案 #

要保留滑动动画同时移除页面变暗效果，你可以通过自定义cardStyleInterpolator（卡片样式插值器）修改默认动画的透明度参数：

方法1：基于默认滑动动画修改 #

直接复用React Navigation提供的默认水平滑动动画，仅覆盖透明度相关配置：

import { createStackNavigator } from '@react-navigation/stack';
import { CardStyleInterpolators } from '@react-navigation/stack';

const AddNavigator = createStackNavigator();

// 自定义插值器：保留滑动，移除透明度变化
const customCardInterpolator = (props) => {
  const defaultSlideInterpolator = CardStyleInterpolators.forHorizontalIOS(props);
  
  return {
    ...defaultSlideInterpolator,
    cardStyle: {
      ...defaultSlideInterpolator.cardStyle,
      opacity: 1, // 强制卡片始终不透明
    },
    overlayStyle: {
      opacity: 0, // 移除切换时的遮罩层变暗效果
    },
  };
};

// 应用到Navigator
<AddNavigator.Navigator
  screenOptions={{
    headerShown: false,
    gestureEnabled: false,
    contentStyle: {
      backgroundColor: 'blue', // 保留你的背景色配置
    },
    cardStyleInterpolator: customCardInterpolator, // 使用自定义插值器
  }}>
  <AddNavigator.Screen
    name={APP_MODAL.a}
    component={Ascreen}
  />
  <AddNavigator.Screen
    name={APP_MODAL.b}
    component={BScreen}
  />
</AddNavigator.Navigator>

方法2：完全自定义滑动动画 #

如果需要更精细的控制，可以从头定义动画逻辑，仅保留位移效果：

import { Animated, Easing } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const AddNavigator = createStackNavigator();

const customSlideAnimation = () => ({
  transitionSpec: {
    open: {
      animation: 'timing',
      config: { duration: 350, easing: Easing.out(Easing.poly(4)) },
    },
    close: {
      animation: 'timing',
      config: { duration: 350, easing: Easing.out(Easing.poly(4)) },
    },
  },
  cardStyleInterpolator: ({ current, next, layouts }) => ({
    cardStyle: {
      transform: [
        {
          translateX: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [layouts.screen.width, 0],
          }),
        },
        ...(next ? [{
          translateX: next.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, -layouts.screen.width],
          }),
        }] : []),
      ],
      opacity: 1, // 固定不透明
    },
    overlayStyle: { opacity: 0 }, // 移除遮罩层
  }),
});

// 应用到Navigator
<AddNavigator.Navigator
  screenOptions={{
    headerShown: false,
    gestureEnabled: false,
    contentStyle: { backgroundColor: 'blue' },
    ...customSlideAnimation(), // 展开自定义动画配置
  }}>
  {/* 屏幕配置 */}
</AddNavigator.Navigator>

两种方法都能实现保留左右滑动动画、移除变暗效果的需求，解决Header处的折痕问题。

内容的提问来源于stack exchange，提问作者James Lee