I.はじめに
反応ネイティブモーダルの豊富なを提供し、強化され、アニメーションやカスタマイズが反応し、ネイティブのモーダルダイアログのオープンソースコンポーネントをAPIで、さまざまなダイアログボックス爆弾開発のニーズを満たすことができ、それはマスクが付属していますポップ峰の形で層。それは良い選択である、優しいメッセージ表示をユーザーに提供するために使用します。
第二に、インストール
1、NPMインストールxxxの--save
NPMインストールが反応し、ネイティブモーダル--save
2は、反応ネイティブリンクをXXX
反応ネイティブリンクを反応させ、ネイティブモーダル
第三に、プロパティ
次のようにモーダルダイアログコンポーネントは、より多くの属性が用意されています。
// ダイアログのアニメーション表示モード、デフォルトslideInUp animationIn：文字列; // 必要のボックスアニメーションの表示時間、デフォルト300msの animationInTiming：ナンバー; // ダイアログが隠されたモードで、デフォルトslideOutDownアニメーション animationOut：文字列; // ダイアログアニメーション隠します所要時間、デフォルト300msの animationOutTiming：;数 // 遮断特性を避けるために、キーボードを有効にするかどうか、入力ボックスブロックしない、起動 avoidKeyboard：ブール; // 画面全体を覆った場合 coverScreen：ブール; // マスク層表示するかどうかを hasBackdropを：ブール; // マスク層、背景色 backdropColor：文字列; // マスク層透明 backdropOpacity：数; // 所望の層のマスクを表示する時、デフォルトの300ミリ秒 backdropTransitionInTiming：ナンバー; // 時間を隠すためのマスク層に必要な、デフォルト300msの backdropTransitionOutTiming：ナンバー; // サポートカスタムマスク層 customBackdrop：ヌル; // ドライブネイティブ使用するかどうかを useNativeDriver：ブール値を; // 機器の高さ（缶で非表示装置に有用なナビゲーションバー） deviceHeight：NULL ; // 装置の幅（デバイスに有用なナビゲーションバーを隠すことができる） deviceWidth：NULL ; // もし隠れモードときアニメーションコンテンツ hideModalContentWhileAnimating：ブール; // もしサブアセンブリに伝播スリップイベント（例えば、ScrollViewのモダリティ）可能 propagateSwipe：ブール; //が表示されている のisVisible：ブール; // トリガコールバック・モードは、完全にアニメーションを表示するとき onModalShow：（）=> ヌル; // トリガモードのムービーが表示されるときにコールバック onModalWillShow：（）=> ヌル; // トリガコールバック時に完全に隠されたムービーモード onModalHide：（）=> nullを; // 映画が非表示になりますときモードが起動され、コールバック onModalWillHide：（）=> ヌル; // トリガマスク層領域のクリックコールバック onBackdropPressを：（）=> ヌル; // ボタンがマスク層の上にクリックされたときにトリガコールバック onBackButtonPress：（）=> ヌル; // スイープしきい値、デフォルトの100。達したときにOnSwipeComplete機能がトリガされ swipeThreshold：ナンバーを; // 掃引方向の swipeDirection：文字列; //は、掃引の開始時にコールバックをトリガ onSwipeStart：FUNC; // スイープトリガーコールバックモバイル onSwipeMove：FUNC; // トリガースイープが完了したコールバック onSwipeComplete：FUNCを; // スイープトリガーコールバックがキャンセルされ onSwipeCancel：FUNC; // コンポーネントのスタイルの スタイル：任意; // 指定された場所にスクロール scrollTo：NULL ; // オフセットをどのくらいスクロール scrollOffsetを：数; // 圧延最大オフセット scrollOffsetMaxを：数; // 水平方向のスクロールを許可するかどうか scrollHorizontal：ブール; // デバイスの向きサポート supportedOrientations ：文字列 []。
第四に、使用
/ * * *サンプルネイティブアプリを反応させる * https://github.com/facebook/react-native * @flow * / インポートから、{コンポーネント}を反応させ' 反応します' 。 インポート{ AppRegistry、 スタイルシート、 ビュー、 テキスト }から「反応ネイティブ」。 以下からの輸入モーダルは、「ネイティブモーダル反応します」; 輸出デフォルトの クラスRNApplyComponentは、コンポーネント{拡張 // 初始化状態の コンストラクタ（小道具）{ スーパー（小道具）。 この.state = {可視：偽}。 } // 显示 ショー（）{ この.setState（{ 可視：真 }）。 } // 隐藏 非表示（）{ この.setState（{ 可視：偽 }）。 } // 弹框 _renderModal（）{ リターン（ < モーダル のisVisible = { 真} animationIn = { ' bounceInUp ' } backdropColor = { ' 赤色' } backdropOpacity = { 0.4 } onBackdropPress = {（）=> この.hide（）} onModalWillShow = {（）=> {にconsole.log（" --- onModalWillShow --- " ）}} onModalShow = {（）=> {にconsole.log（" --- onModalShow --- " ）}} onModalWillHide = {（）=> {にconsole.log（" --- onModalWillHide --- " ）}} onModalHide = { （）=> {コンソール。ログ（" --- --- onModalHide " ）}} > <ビュースタイル= {[styles.center]}> <ビュースタイル= {[styles.parent、styles.center]}> <styles.contentテキストスタイル= {} >すぐにあなたを歓迎</テキスト> </ビュー> </ビュー> </モーダル> ） } / * 課題：私はのisVisibleによってその表示と非表示を制御することができない理由モーダルは知りません。私は同じ問題githubのコミュニティーに質問見に行きました https://github.com/react-native-community/react-native-modal/issues/295 ではなく、ソリューションを。 私は私が反応しネイティブバージョンは（私のバージョン0.44.3、更新が繰り返し失敗し、そこに投げていない場合）による低すぎると思います。私はここに提示するので、解決策は、三項演算子によって解決されて、 いますが、示されたアニメーションを隠すことはできません。疑問が答えることができる場合は、次の噂は歓迎、どうもありがとうございました。 <モーダルのisVisible = {this.state.visible} onBackdropPress = {（）=> this.hide（）}> <ビュースタイル= {[styles.center]}> <ビュースタイル= {[styles.parent、styles.center ]}> <テキストスタイル= {styles.content}>欢迎您的到来</テキスト> </表示> </表示> </モーダル> * / レンダリング（）{ リターン（ <ビュースタイル= {[styles.container 、styles.center]}> <テキストスタイル= {styles.content}たonPress = {（）=> この .SHOW（）}>表示</テキスト> { この .state.visible？ この ._renderModal（）：ヌル } </ビュー> ）; } } CONSTスタイル= StyleSheet.create（{ コンテナ：{ フレックス：1 、 のbackgroundColor：' #FFFFFF ' }、 中心：{ justifyContent：' 中央' 、 alignItems：' 中央' }、 親：{ 幅：300 、 高さ：200 、 のbackgroundColor：' #FFFFFF ' 、 borderRadius：10 }、 コンテンツ：{ たfontSize：25 、 色：' ブラック' 、 textAlign：' 中央' } }）。 AppRegistry.registerComponent（' RNApplyComponent '、（）=> RNApplyComponent）。
