React-Native Controlled Modal Freezing

Question

면책 조항 : iPhone 에뮬레이터 atm에서만 테스트 할 수 있습니다. React-Native 0.49 Mac OSX 높음 Sierra

상위 구성 요소에서 해당 소품을 가져 오는 모달을 만들고 싶습니다. 로 아래 는 :

const Modal = ({ showModal, closeModal }) => (
    <Modal 
    animationType="slide" 
    transparent={false} 
    visible={showModal} 
    onRequestClose={() => {alert("Modal has been closed.")}} 
    > 
    <View style={{marginTop: 22}}> 
    <Text>Hello World!</Text> 
    <TouchableHighlight onPress={() => closeModal() }> 
     <Text>Hide Modal</Text> 
    </TouchableHighlight> 
    </View> 
    </Modal> 
); 

이 부모의 예는 다음과 같습니다

<View> 
    <Modal 
    showModal={this.state.showModal} 
    closeModal={() => this.setState({ showModal: false })} 
    /> 
    <ScrollView> 
     {elements.map(element => { 
     return (
      <Card key={element.id}> 
      <Badge onPress={() => this.setState({ showModal: true })> 
       <Text>Show</Text> 
      </Badge> 
      </Card> 
     ); 
     })} 
    </ScrollView> 
</View> 

나는 쇼 모달 버튼을 클릭하면 모달 팝 - 업 예상대로하지만 closeModal을 클릭하면 다음 모달가 사라지고 다시 다시 나타납니다 그러나 이번에는 UI와 상호 작용할 수 없으며, UI가 고정되어있는 것처럼 보입니다. 그런 다음 에뮬레이터를 다시 시작해야합니다.

I 복사 바로 반작용 - 기본 문서에서 코드를 붙여 넣을 경우 : https://facebook.github.io/react-native/docs/modal.html 모달가 잘 작동합니다. 그것은 자체 포함 된 구성 요소입니다.

도움/조언을 많이 주시면 감사하겠습니다.

감사합니다, 에미 르 당신의 부모 구성 요소 내부

Answer 1

고통스럽게 처음부터 구성 요소를 재 구축 후 나는 뜻밖의 범인이 있었다 참조 : 내가 모달가 잘 작동이 코드를 제거하지만 난 다시 추가 할 때 내가하려고 할 때 그것을 동결 ​​

componentWillUpdate() { 
    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); 
    LayoutAnimation.easeInEaseOut(); 
    } 

닫기. 이것은 안드로이드에 대한 IOS 캔트 확인에 약간의 애니메이션 충돌로 보인다.

시간 제한을 1000ms 추가하면 화면이 다시 동결되기 전에 조금 더 밝혀졌습니다.

누군가가 동일한 이슈를 가지고 있으면 호출되는 여러 애니메이션을 찾으십시오.

호프가 도움이 되었기를 바랍니다. 더 나은 해결 방법이 있다면 알려주세요.

감사합니다, 국왕

Answer 2

, false에 showModal을 설정하는 함수를 만들 수 있습니다.

closeModal =() => { 
    this.setState({ 
    showModal: false 
    }); 
} 

부모 그럼 당신은 소품을 통해, 당신의 Modal로를 통과해야합니다. 당신의 Modal, 변화의 내부

<Modal showModal={this.state.showModal} closeModal={this.closeModal} />

: <TouchableHighlight onPress={() => this.closeModal() }>

사람 : <TouchableHighlight onPress={closeModal}>

Answer 3

왜 유) (this.closeModal를 사용합니까? 소품 (즉, closeModal())에서 얻은 것을 사용하십시오.

<TouchableHighlight onPress={() => closeModal() }> 

Answer 4

이것은 알고 문제 및 코드와는 아무이다.

여기를 참조하십시오. https://github.com/facebook/react-native/issues/16895