反応ネイティブモーダルは、私が使用することを指定した高さと幅

Question

モーダルでレンダリングされていませんが、私はそれがこれは私のモーダルファイルであるダイアログボックス

のように見せることcouldntのフルスクリーンにレンダリングされます

私はそれを使用する場所です：

<View style={{ }}> 
 
     <LoadingModal 
 
       visible={this.state.loading} 
 
       animationType="slide" 
 
       size="large" 
 
       color="black" 
 
     /> 
 
     </View>

私はこれを行うとき、私は今、これを取得していますし、私は、ビューの幅と高与えたとき、後で私が

は私がしたいことはある任意の変更を取得didntのため、すべてのことを削除しましたこの：

Answer 1

私は、これはあなたを助けるかもしれない推測：https://snack.expo.io/HkGhIy90-

また、Dimensionsモジュールを忘れずに、私のExpo Snackのような固定値を使うのではなく、高さに基づいて各画面に対してmarginTopとmarginBottomを動的に設定してください。

Answer 2

あなたが見ているのは、デフォルトのネイティブ反作用です。あなたはどんなスタイルも設定していないので、なぜダイアログを中央に置くことを期待していましたか？

いくつかのヒント：

1. あなたが途中で中央に何かをしたい場合は、「中央」にalignItemsとjustifyContentを設定したいです。それは通常、親ビューの真ん中に置くというやり方です。
2. RNのデフォルト設定ではすべてがフレックスしていますが、最初の親ビューをflex = 1に設定する必要があるため、RNは画面全体を占有する必要があることを認識します。
3. デフォルトでは、ビューの子はすべて列内で並べ替えられます。行が必要なので、flexDirection = 'row'を設定する必要があります
4. スタイルは通常のCSSのように親から継承しません。手動で各スタイルを設定する必要があります。

他の作業を行う前に、すべてのスタートガイドをお読みください。特別にこれを読んで：https://facebook.github.io/react-native/docs/flexbox.html