gpt4 book ai didi

react-native - 如何在 react 导航(3.x)中为全屏模式提供透明背景?

转载 作者:行者123 更新时间:2023-12-03 22:47:49 24 4
gpt4 key购买 nike

如何在 react 导航(3.x)中为全屏模式提供透明背景。给出的解决方案here不适用于新版本的 react-navigation。
我想要在另一个屏幕上呈现的新全屏模式中的透明颜色。

  const MainNavigator = createStackNavigator(
{
BrowserHome: { screen: BrowserHome },
ImageDetailModal: {
screen: ImageDetail,
navigationOptions: {
header: null
}
}
},
{
mode: "modal",
cardStyle: {
backgroundColor: "transparent",
opacity: 1
}
}
);

const AppContainer = createAppContainer(MainNavigator);

export default AppContainer;

虽然我在“BrowserHome”组件上呈现的图像细节组件是:
export default class ImageDetail extends React.Component {
render() {
const modalColor = this.props.navigation.getParam("modalColor");
return (
<View
style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}
>
<View
style={{
height: "50%",
width: "100%",
backgroundColor: "red",
justifyContent: "center"
}}
>
<Text>Testing a modal with transparent background</Text>
</View>
</View>
);
}
}

最佳答案

您现在可以删除 cardStyle对象并改为设置 transparentCard: true :

const MainNavigator = createStackNavigator(
{
BrowserHome: { screen: BrowserHome },
ImageDetailModal: {
screen: ImageDetail,
navigationOptions: {
header: null
}
}
},
{
mode: "modal",
transparentCard: true
})

https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

关于react-native - 如何在 react 导航(3.x)中为全屏模式提供透明背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53428023/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com