实现淡入淡出效果的最简单方法:
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
- 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 https://reactnavigation.org/docs/stack-navigator/#animations