web-dev-qa-db-ja.com

React Native：モーダルは、その上にアラートが表示されても非表示になりません

Modalが表示され、その上にアラートが表示された場合、ユーザーが何もクリックしなくてもアラートがすぐに消え、Modalがプログラムで削除されても画面から削除されないという奇妙な動作に気づきました。 。バグだと思います。回避策はありますか？

react-nativealert
10
vaibhav chaturvedy

React Nativeで問題が発生しているようです。私もこの問題に遭遇しました。これを修正する最も簡単な方法は、モーダルが非表示になったらタイムアウトでアラートを呼び出すことです：... setTimeout(() => Alert.alert(msg), 10); ...

9
Slowyn

はい、私はそれがreact-nativeのバグであるべきだと思います。私のコードは0.37にアップグレードした後、react-native 0.33で正常に動作し、同じ問題に遭遇しました。

次のコンテンツは、react-native GitHubの問題に関する私のコメントです： https://github.com/facebook/react-native/issues/10471#issuecomment-262450975 、お役に立てば幸いです。

React-nativeを0.33から0.37にアップグレードした後、同様の問題に遭遇しました。モーダルを閉じた後にアラートダイアログを表示したいのですが、アラートダイアログを閉じてcmd + Rを使用してアプリをリロードしてもモーダルが消えません。 iOSでのみ、react-native0.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)
}

するとモーダルは消えますが、アラートダイアログは表示されません!!!

また、次のように、setTimeoutコールバックでsetStateを実行してみました。

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

しかし同じ結果で、アラートダイアログはまだポップアップしません。

最後に、[アラート]ダイアログを閉じた後、モーダルを非表示にすることにしました。これでうまくいきます。コードは次のようになります：

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

私のために働いたのは、setStateでコールバックを適用することでした：

this.setState({
  modalShouldBeOpen: false,
},
() => {
  this.props.navigation.replace('NextPageToNavigateTo');
},
);

問題は、コールバックがないと、ナビゲーションが早すぎて、モーダルが奇妙な状態でスタックしたことだと思います。

0
Ville Miekk-oja