リアクタネイティブ制御モーダルフリーズ

Question

免責事項： iPhoneエミュレータatmでのみテストできます。 リアクションネイティブ0.49 Mac OSXハイシエラ

親コンポーネントからその小道具を取得するモーダルを作成したいと思います。以下のように ：

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は、凍結されているように見える、私はエミュレータを再起動する必要があります。

React-Nativeドキュメントから直接コードをコピーして貼り付けた場合： https://facebook.github.io/react-native/docs/modal.html モーダルは問題ありません。しかしそれは自己完結型のコンポーネントです。

ご迷惑をおかけして申し訳ございません。

よろしく、 エミールあなたの親コンポーネント内部

Answer 1

が痛々しい傷からコンポーネントを再構築した後、私は思いも寄らない犯人があった参照してください。私はモーダルがうまく働いていた、このコードを削除しますが、私は戻ってそれを追加したとき、私がしようとしたとき、それが凍結した

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

閉じる。これは、Android用のiOS cantの確認でアニメーションの競合が発生しているようです。

タイムアウトを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

なぜuがthis.closeModal（）を使うのですか？小道具から得ているもの、つまりcloseModal（）だけを使用してください。

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

Answer 4

これは既知の問題であり、あなたのコードとは何の関係もあります。

ここをクリックしてください。https://github.com/facebook/react-native/issues/16895