React Native：アラートが表示されたときにモーダルが非表示にならない

Question

Modalが表示され、その上にアラートが表示されると、ユーザーが何もクリックしなくてもアラートがすぐに消えてしまうそれとモーダルはプログラムで削除されても画面から削除されません。 私はバグだと思っています。回避策はありますか？

Answer 1

リアクションネイティブで問題があるようです。私もこの問題に出会った。それを修正する 最も簡単な方法は、モーダル後にタイムアウトして警告を呼び出すことです隠されている。 ... setTimeout(() => Alert.alert(msg), 10); ...

Answer 2

はい、私はそれが反応し、ネイティブのバグであるべきだと思います、私のコードは、反応ネイティブ0.33、後により正常に動作します0.37にアップグレードし、同じ問題に直面しました。

は、コンテンツ、次の反応ネイティブGitHubの問題で、私のコメントです：私は反応するネイティブ0.33から0.37にアップグレードした後、私は同様の問題に会った

---

：https://github.com/facebook/react-native/issues/10471#issuecomment-262450975、あなたを助けることができると思います。私はモーダルを閉じた後に警告ダイアログを表示したいが、警告ダイアログを閉じてcmd + Rを使ってアプリケーションをリロードしてもモーダルは消えない。 iOSでのみ有効で、反応ネイティブ0.33で正常に動作します。

コードは以下のお気に入り：

renderModal() { 
    return (
    <Modal 
     animationType = 'fade' 
     transparent={true} 
     visible={this.state.isProcessing} 
     onRequestClose={()=>{}}> 
     <View style={styles.modalContainer}> 
     <LoadingSpiner size='large' color='white' styleAttr='Normal'/> 
     </View> 
    </Modal> 
) 
} 

_pressNext() { 
    // display a Modal with a spinner 
    this.setState({isProcessing: true}} 

    // network request 
    // ... 
} 

componentWillReceiveProps(nextProps) { 
    // ... 

    // to hide the Modal with a spinner 
    this.setState({isProcessing: false}) 
    Alert.alert('title', 'Something has done!', [ 
     { text: 'Got it', onPress:() => {} } 
    ]) 
    } 
} 

その後、私はそれを回避するためにsetTimeoutを使用しようと、コードは次のお気に入り：

componentWillReceiveProps(nextProps) { 
    // ... 

    // to hide the Modal with a spinner 
    this.setState({isProcessing: false}) 
    setTimeout(() => { 
     // this log will output 
     console.log("show alert") 
     // but Alert doesn't display 
     // sometimes it will display occasionally 
     Alert.alert("title", "msg") 
    }, 200) 
} 

その後、モーダルが消え、しかし、警告ダイアログます表示することはできません！

私はまた、このように、setStateコールバックで実行setTimeoutを試してみました：

this.setState({isProcessing: false},() => { 
    setTimeout(() => { 
    Alert.alert("title", "msg") 
    }, 200) 
} 

が、同じ結果が、警告ダイアログがまだポップアップしません。

最後に、警告ダイアログを閉じた後、私はModalを非表示にすることにしました。コードは次のように好きです：

Alert.alert("title", "msg", [ 
    { text: "OK", onPress:() => { this.setState({ isProcessing: false } }  
])