当我导航到本机页面时，如何摆脱上一页/当前页面的变暗

Question

我正在使用反应本机导航，当我尝试导航到页面或返回时，它会“变暗/降低不透明度”当前页面并生成左侧写入动画以显示我试图关注的页面的焦点默认情况下。我喜欢从左向右滑动的动画，但不喜欢“变暗”部分，因为它会从标题处产生折痕

在当前页面上创建一个显示折痕的暗淡区域。当我有标题时进行导航。在反应导航中的堆栈中导航时，如何不使其变暗。导航/返回

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

https://streamable.com/vsgz9w ^ 示例视频以便于理解。 （我想在导航时消除折痕）

Answer 1

您可以使用 @react-navigation/stack 并执行以下操作：

import {createStackNavigator,TransitionPresets} from '@react-navigation/stack';
const Stack = createStackNavigator();
const StackScreen = () => (
  <Stack.Navigator
    screenOptions={{
      gestureEnabled: true,
      gestureDirection: 'horizontal',
      transitionSpec: {
        open: TransitionPresets.SlideFromRightIOS.transitionSpec.open,
        close: TransitionPresets.SlideFromRightIOS.transitionSpec.close,
      },
    }}>
     <Stack.Screen name="Screen1" component={FirstScreen} />
     <Stack.Screen name="Screen2" component={SecondScreen} />
  </Stack.Navigator>
);