背景不包含react-native-modalbox的導航欄

Question

我指的是react-native-modalbox以反應原生模式呈現視圖。 這個組件很好用，直到我在導航器中使用它。但是，如果此組件在導航器組件內部使用，則所呈現的模型不會涵蓋導航欄，其中警報覆蓋了該導航欄。

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}, 

    }}/> 
); 
} 
}); 

請參閱以下屏幕查看我的問題。

是否有辦法讓這個模型的行爲完全像alert。

Answer 1

發生這種情況的原因是模式被定義爲導航器的子模塊。 React native不支持zindex，但會根據渲染順序生成該類型的行爲。關於這一主題的一些有用的鏈接：

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

的反應，本機modalbox項目問類似的問題：https://github.com/maxs15/react-native-modalbox/issues/60

下面是使用您的代碼段的一個精簡版演示如何繪製順序的一個例子作品。當您點擊「OPEN」時，模式將在導航器的頂部打開：

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