【问题标题】:Stack.Navigator fade-transition between Stack.Screens in React-native?React-native中Stack.Screens之间的Stack.Navigator淡入淡出过渡?
【发布时间】:2020-07-07 09:24:57
【问题描述】:

如何在 React-native 中为 Stacked Screes 添加过渡效果?

<NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Stocks" component={StocksScreen} />
    </Stack.Navigator>
</NavigationContainer>

是否有默认的方式来实现淡入淡出效果?

【问题讨论】:

标签: react-native react-navigation react-navigation-stack


【解决方案1】:

实现淡入淡出效果的最简单方法:

const forFade = ({ current }) => ({
  cardStyle: {
    opacity: current.progress,
  },
});

如果你想为整个导航器应用淡入淡出效果:

<Stack.Navigator
   screenOptions={{
      headerShown: false,
      cardStyleInterpolator: forFade,
   }}>
   <Stack.Screen name="Home" component={HomeScreen} />
   <Stack.Screen name="Stocks" component={StocksScreen} />
</Stack.Navigator>

您也可以通过设置选项为单屏应用cardStyleInterpolator:

<Stack.Screen 
  name="Home" 
  component={HomeScreen} 
  options={{ cardStyleInterpolator: forFade }}/>

您可以自定义forFade函数以实现其他效果,也可以使用一些预制的插值器,如:

  • 对于水平IOS
  • 垂直IOS
  • 用于ModalPresentationIOS
  • FadeFromBottomAndroid
  • 用于RevealFromBottomAndroid
import { CardStyleInterpolators } from '@react-navigation/stack';

<Stack.Screen
  name="Profile"
  component={Profile}
  options={{
    cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
  }}
/>;

更多信息在这里:https://reactnavigation.org/docs/stack-navigator/#animations

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-07-26
    • 2012-02-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多