我正在对我需要多重屏幕过渡的情况做出评估。 现在,我已经做好了准备,以达到我所希望的点,但问题在于屏幕过渡的起点。 例如,我想从我所利用的纽芬兰语的故事开始,从这里开始进行屏幕转换;当你利用“Info”故事时,它开始从这种形象中解救出来。

我尝试了共同的内容,并分享了TransitonTag,但我猜测这些内容是为了屏幕之间共同的形象。 我需要一种算法或某种东西,使这种估计像在《新闻报道》中那样。

这就是我的申请。

const Stack = createStackNavigator();

const customTransition = {
 transitionSpec: {
 open: {
  animation:  timing ,
  config: {
    duration: 800,
  },
},
close: {
  animation:  timing ,
  config: {
    duration: 300,
  },
 },
 },
 cardStyleInterpolator: ({current, next, layouts}) => {
 return {
  cardStyle: {
    transform: [
      {
        scaleX: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
      {
        scaleY: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
      {
        translateX: next
          ? next.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.width, 0],
            })
          : current.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.width, 0],
            }),
      },
      {
        translateY: next
          ? next.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [layouts.screen.height, 0],
            })
          : current.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.height, 0],
            }),
      },
    ],
  },
};
},
};

 const AppStack = () => {
 return (
 <Stack.Navigator
  screenOptions={{
    ...customTransition,
    headerShown: false,
    presentation:  transparentModal ,
  }}>
  <Stack.Screen name="Back" component={TabScreens} />
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Story" component={StoryScreen} />
 </Stack.Navigator>
 );
  };

 const App: React.FC = () => {
 return (
  <GestureHandlerRootView style={{flex: 1}}>
  <NavigationContainer>
    <AppStack />
  </NavigationContainer>
  </GestureHandlerRootView>
  );
  };
export default App;