backdrop不包含react-native-modalbox的导航栏

Question

我正在引用react-native-modalbox以反复原生方式呈现视图模式。 这个组件很有效，直到我在导航器中使用它。但是如果在导航器组件中使用此组件，则显示的模型不会覆盖导航栏，警报会覆盖导航栏。

var load_from_server = true;
if (detect local storage)  
{
  if (cache of css, js found)
  {
     load the css and js from local storage cache
     load_from_server = false;
  }
}
if (load_from_server)
{
   document.write('<script>...');
}

$( window ).unload(function() {
  clear local storage cache
});

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

是否可以使此模型的行为与警报完全相同。

Answer 1

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

https://github.com/facebook/react-native/issues/1076

在react-native-modalbox项目中提出类似问题：https://github.com/maxs15/react-native-modalbox/issues/60

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

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);

Answer 2

Modal中的react-native-modalbox组件接受coverScreen属性，如下所示：

<Modal coverScreen={true} ...