React Navigation：如何将两条路由推送到堆栈而不闪烁过渡答案

【问题标题】：React Navigation: How to push two routes to the stack without flickering transitionReact Navigation：如何将两条路由推送到堆栈而不闪烁过渡
【发布时间】：2021-11-30 16:38:22
【问题描述】：

嗨，我正在尝试使用 React Navigation 直接从屏幕 A 导航到屏幕 C，同时以编程方式在它们之间插入屏幕 B，这样当我在屏幕 C 上使用 Back 按钮时，我最终会进入屏幕B 而不是屏幕 A。我使用以下代码使其工作

navigation.push('B')
navigation.push('C')

唯一的问题是在从 A 到 C 的转换过程中，屏幕 B 会短暂闪烁。我想摆脱这种闪烁的过渡，使它看起来像是从 A 到 C 的直接过渡，同时在它们之间不知不觉地添加了屏幕 B。有没有办法做到这一点？

我也尝试过使用navigation.reset，但遇到了与使用navigation.push 时相同的转换问题。

navigation.reset({
    index: 2,
    routes: [
      {name: 'A'},
      {name: 'B'},
      {name: 'C'},
    ],
  })

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您可以采取的另一种方法是直接从 A 导航到 C

navigation.navigate('C');

并为屏幕B 和C 定义具有自定义后退按钮行为的自定义后退按钮

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="A" component={A} />
        <Stack.Screen
          name="B"
          component={B}
          options={({navigation}) => ({
            headerLeft: props => (
              <HeaderBackButton
                onPress={() =>
                  navigation.reset({index: 0, routes: [{name: 'A'}]})
                }
              />
            ),
          })}
        />
        <Stack.Screen
          name="C"
          component={C}
          options={({navigation}) => ({
            headerLeft: props => (
              <HeaderBackButton onPress={() => navigation.navigate('B')} />
            ),
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在屏幕C 中，后退按钮导航到B，在屏幕B 中，后退按钮重置导航状态并导航到屏幕A，因此后退按钮不会显示在屏幕上A .

【讨论】：