向反应导航导航器添加叠加层
我正在尝试向react-navigation导航器添加叠加层(例如,显示错误弹出窗口/多士炉/调试按钮等)。向反应导航导航器添加叠加层
但是我有一个问题:
当我把反应导航在视图,顶部覆盖的反应要么导航不显示或以某种方式被扭曲。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
class SimpleAppWithOverlay extends React.Component {
render() {
return(
<View>
<View style={{position: "absolute", backgroundColor:"transparent", margin:30}}>
<Text>Some Overlay</Text>
</View>
<SimpleApp/>
</View>);
}
}
这里有两个片段展示了我的意思在现场编辑:
- 基本反应导航设置:https://snack.expo.io/ryI4oCvQW
- 相同,但具有覆盖尝试:https://snack.expo.io/HkSgoCDX-
您可以在第二个示例中看到叠加层出现,但底层应用只是不可见。
可以工作吗?怎么样?
改变了你的代码有点
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return (
<View style={{ flex: 1 }}>
<Text>Hello, Navigation!</Text>
</View>
)
}
}
class SimpleAppWithOverlay extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<SimpleApp />
<View style={{ position: "absolute", backgroundColor: 'rgba(255,0,0,0.4)', top: 0, bottom: 0, left: 0, right: 0 }}>
<Text style={{ paddingTop: 8 }}>Some Overlay</Text>
</View>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('overlayapp',() => SimpleAppWithOverlay);
你应该注意到,position: 'absolute'
只父是绝对不喜欢绝对在CSS定位相对。
如果你想叠加在navigationBar上面,你可以做一些类似于navigationOptions.headerRight的事情。
是否可以覆盖导航器本身或仅覆盖屏幕? –
在我的真实例子中,我有很多路由,而不仅仅是一个,我想在顶层有一个覆盖层(例如,在开发模式下有一个浮动调试按钮)。 –
对不起,我的问题可能不清楚...... –
我知道愚蠢的问题,但你的覆盖背景是透明的,你是否将它定位在基本图层的上方:'position','absolute''? –
@MilanGulyas谢谢 - 愚蠢的问题仍然有帮助! :)我*是*使用'position:absolute',但* not *'backgroundColor:transparent'。不过,我试过https://snack.expo.io/HyzBWWdQW和反应导航器仍然没有显示。所以如果我不做一些愚蠢的行为(我的第一个假设),也许它正在做一些聪明的事情 - 在这种情况下,问题是 - 我们怎么聪明呢? –
你可以用上面的相关代码编辑上面的问题吗?没有这一点很难猜测。 –