react-native - React-native中Stack.Screens之间的Stack.Navigator淡入淡出过渡?
问题描述
如何在 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
函数以实现其他效果,也可以使用一些预制的插值器,如:
- 水平IOS
- 对于垂直IOS
- 用于模态演示IOS
- 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
推荐阅读
- python - 从命令行运行我的python脚本给出空数据框
- ansible - 如何断言文件
- javascript - javascript代码只允许文本框中的数字和单点
- r - 如何使用变量作为列索引重新排列数据框的列
- html - 向表格行添加水平线
- windows - 在 ATL 无模式对话框上调用 ShowWindow(SW_SHOW) 不会将窗口置于前面
- nlp - 哪个 NLP 任务更容易开始?
- ios - React Native - iOS 和 App Center 部署构建从 main.jsbundle 失败
- javascript - 如何从链接自动上传文件
- python - 在 Python 上从 ascii int 列表创建 .bin 字节文件