Question

如何在React-native中为过渡式叠层添加过渡效果？

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

是否有默认方法来实现fadeIn / fadeOut效果？

Answer 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函数以实现其他效果，也可以使用一些预制的插值器，例如：

forHorizontalIOS
forVerticalIOS
forModalPresentationIOS
forFadeFromBottomAndroid
forRevealFromBottomAndroid

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

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

此处有更多信息：https://reactnavigation.org/docs/stack-navigator/#animations

React-native中Stack.Screens之间的Stack.Navigator淡入淡出过渡？

1 个答案: