React native 背景不覆盖react native modalbox的导航栏

我指的是react native中的当前视图。 在我在导航器中使用该组件之前，它工作得非常好。但是，如果此组件在Navigator组件内使用，则显示的模型不会覆盖导航栏，因为警报会覆盖导航栏

render: function() {
var modalView =

  <Button onPress={this.openModal3} style={styles.btn}>Position centered + backdrop + disable</Button>

  <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
    <Text style={styles.text}>Modal centered</Text>
    <Button onPress={this.toggleDisable} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
  </Modal>

</View>
return (
  <NavigatorIOS style ={{flex:1}}
  ref={'nav'}

  initialRoute={{
    component: ()=> modalView,
    title:'Photoos.Net',
    passProps:{ name: this.props.title},

  }}/>
); 
}
});

render:function（）{
var modalView=
位置居中+背景+禁用
模态中心
禁用（{this.state.isDisabled？“true”：“false”}）
返回(
莫达维，
标题：'Photoos.Net'，
passProps:{name:this.props.title}，
}}/>
); 
}
});

有关我的问题，请参阅以下屏幕。

---

有没有办法使这个模型表现得像警报一样

之所以发生这种情况，是因为模态被定义为导航器的子项。React native不支持zindex，但会根据呈现顺序生成该类型的行为。有关此主题的一些有用链接：

react native modalbox项目中提出的类似问题：

下面是一个示例，使用代码片段的精简版本演示渲染顺序的工作原理。当您点击“打开”时，模式将在导航器顶部打开：

import React from 'react';
import {
  AppRegistry,
  NavigatorIOS,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import Modal from 'react-native-modalbox';

class MyApp2 extends React.Component {
  constructor(props) {
    super(props);
    this.openModal3 = this.openModal3.bind(this);
  }

  openModal3() {
    this.refs.modal3.open();
  }

  render() {
    var modalView = <View style={styles.container}>
      <TouchableHighlight onPress={this.openModal3}>
        <Text>OPEN</Text>
      </TouchableHighlight>
    </View>;

    return (
      <View style={{flex:1}}>
        <NavigatorIOS
          style ={{flex:1}}
          ref={'nav'}
          initialRoute={{
            component: ()=> modalView,
            title:'Photoos.Net'
          }}/>

        <Modal style={[styles.container, styles.modal]} position={"center"} ref={"modal3"}>
          <Text>Modal centered</Text>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f00'
  },

  modal: {
    backgroundColor: '#0f0'
  }
});

AppRegistry.registerComponent('MyApp2', () => MyApp2);

从“React”导入React；
进口{
评估学，
航海家，
样式表，
文本，
触控高光，
看法
}从“反应本机”；
从“react native modalbox”导入模态；
类MyApp2扩展了React.Component{
建造师（道具）{
超级（道具）；
this.openModal3=this.openModal3.bind（this）；
}
openModal3（）{
this.refs.modal3.open（）；
}
render（）{
var modalView=
打开
;
返回(
莫达维，
标题：“Photoos.Net”
}}/>
模态中心
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#f00”
},
模态：{
背景颜色：“#0f0”
}
});
AppRegistry.registerComponent（'MyApp2'，（）=>MyApp2）；

之所以发生这种情况，是因为模态被定义为导航器的子项。React native不支持zindex，但会根据呈现顺序生成该类型的行为。有关此主题的一些有用链接：

react native modalbox项目中提出的类似问题：

下面是一个示例，使用代码片段的精简版本演示渲染顺序的工作原理。当您点击“打开”时，模式将在导航器顶部打开：

import React from 'react';
import {
  AppRegistry,
  NavigatorIOS,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import Modal from 'react-native-modalbox';

class MyApp2 extends React.Component {
  constructor(props) {
    super(props);
    this.openModal3 = this.openModal3.bind(this);
  }

  openModal3() {
    this.refs.modal3.open();
  }

  render() {
    var modalView = <View style={styles.container}>
      <TouchableHighlight onPress={this.openModal3}>
        <Text>OPEN</Text>
      </TouchableHighlight>
    </View>;

    return (
      <View style={{flex:1}}>
        <NavigatorIOS
          style ={{flex:1}}
          ref={'nav'}
          initialRoute={{
            component: ()=> modalView,
            title:'Photoos.Net'
          }}/>

        <Modal style={[styles.container, styles.modal]} position={"center"} ref={"modal3"}>
          <Text>Modal centered</Text>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f00'
  },

  modal: {
    backgroundColor: '#0f0'
  }
});

AppRegistry.registerComponent('MyApp2', () => MyApp2);

从“React”导入React；
进口{
评估学，
航海家，
样式表，
文本，
触控高光，
看法
}从“反应本机”；
从“react native modalbox”导入模态；
类MyApp2扩展了React.Component{
建造师（道具）{
超级（道具）；
this.openModal3=this.openModal3.bind（this）；
}
openModal3（）{
this.refs.modal3.open（）；
}
render（）{
var modalView=
打开
;
返回(
莫达维，
标题：“Photoos.Net”
}}/>
模态中心
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#f00”
},
模态：{
背景颜色：“#0f0”
}
});
AppRegistry.registerComponent（'MyApp2'，（）=>MyApp2）；

来自

react native modalbox的
Modal组件
接受
coverScreen
属性，如：

<Modal coverScreen={true} ...

来自
react native modalbox
的
Modal
组件接受一个
coverScreen
属性，如下所示：

<Modal coverScreen={true} ...

是的，没错。就连我也想出了同样的解决办法。谢谢，没错。就连我也想出了同样的解决办法。谢谢你，伙计