배경은 반응 네이티브 모달 상자의 탐색 모음을 포함하지 않습니다.

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

    }}/> 
); 
} 
}); 

내 문제는 다음 화면을 참조하십시오.

이 모델이 경고와 똑같이 동작하도록 만드는 방법이 있습니까?

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