react-native - React-Navigation v5 - 堆栈导航器之间的透明度
问题描述
嘿,我在使用多个Stack.Navigator时遇到了透明度问题。
我创建了 2 个Stack.Navigators -> 一个用于Screens,一个用于Popups。问题是,我的弹出窗口有透明背景,在这种情况下,我需要在背景中显示屏幕。它在 react.navigation v4 中工作,现在在 v5 中我找不到任何解决方案来解决这个问题。
小吃 https://snack.expo.io/@m.jachym/react-navigation-stacks-transparency
*有两个Stack.Navigator,因为用于Popups的 Stack.Navigator具有不同且复杂得多的screenOptions。此外,在有关嵌套导航器的文档中,有一条建议将一个Stack.Navigator放入另一个 Stack.Navigator 中。在这种情况下,问题是,当您设置父Stack.Navigator headerMode="screen" 和子Stack.Navigator headerMode="none" 时,子 headerMode 是从父继承的。其他属性也存在同样的问题 - 这就是我的导航结构保持原样的原因。
我知道我做错了什么,或者那是新版本的 react-navigation 的问题,我应该写信给 react-navigation 团队?*
解决方案
问题是当您在堆栈中显示屏幕时,您希望将Screens
堆栈放在后台Modals
。您已经为模态堆栈中的屏幕设置了透明背景,但包含Modals
堆栈本身的屏幕没有透明背景。
您还需要使包含Modals
堆栈的屏幕透明:
<Stack.Screen
name="Modals"
component={Modals}
options={{ cardStyle: { backgroundColor: "transparent" } }}
/>
子项的 headerMode 是从父项继承的。其他属性也存在同样的问题 - 这就是我的导航结构保持原样的原因。
导航器不继承其父导航器的配置。如果您正在谈论导航器配置(道具)和屏幕,导航器的配置不适用于屏幕(例如屏幕没有headerMode
)。
你不需要那么多导航器。像这样的单个导航器很好:
const modalOptions = {
headerShown: false,
cardStyle: { backgroundColor: "transparent" },
cardOverlayEnabled: true,
cardStyleInterpolator: ({ current: { progress } }) => ({
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.1, 0.3, 0.7]
})
},
overlayStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.6],
extrapolate: "clamp"
})
}
})
};
const Navigation = () => {
return (
<Stack.Navigator headerMode="screen">
<Stack.Screen name="Home" component={Home} />
<Stack.Screen
name="NewPopup"
component={NewPopup}
options={modalOptions}
/>
<Stack.Screen name="Popup" component={Popup} options={modalOptions} />
</Stack.Navigator>
);
};
推荐阅读
- tomcat - 如何在 Jelastic 中启用 Tomcat Web 应用程序管理器?
- excel - 使用 VBA 将嵌套函数写入 Excel
- c++ - 使用 brew 安装 boost 时缺少 boost_signals 库
- c++ - 如何在 tableWidget 的单元格中访问小部件内的值?
- android - 即使在使用了有效加载大位图指南之后,如何避免 OutOfMemoryError
- c# - 从具有不同表中值字段的网络表单中插入值
- typescript - 初始化时具有空属性的 TypeScript 类
- bash - 如果比较从文件中读取的数字时语句测试失败
- python - 测试用户模型是否有密码的正确方法
- r - ggplot2 - 减少点之间的距离(缩小效果)