如何在 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>
是否有默认的方式来实现淡入/淡出效果?
最简单的实现淡入淡出效果的方法:
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
函数以实现其他效果,或者您也可以使用一些预制的插值器,例如:
import { CardStyleInterpolators } from '@react-navigation/stack';
<Stack.Screen
name="Profile"
component={Profile}
options={{
cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
}}
/>;
更多信息在这里:https://reactnavigation.org/docs/stack-navigator/#animations
对于 React Navigation 6.xx,您可以使用动画选项:
<Stack.Screen
name="Profile"
component={Profile}
options={{ animation: 'fade' }}
/>
支持的值: