如何在反应导航(3.x)中为全屏模式提供透明背景。此处给出的解决方案不适用于新版本的反应导航。我想要在另一个屏幕上呈现的新全屏模式中的透明颜色。
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>
);
}
}