React-NativeでzIndexスタイルを使用してModalの上にビューを表示

Question

zIndexがReact-Nativeに最近導入され、レイヤーのスタック内でViewの位置が変更されました。

Modalコンポーネントの上にViewを表示することはできませんが、

私のコードは次のようになります。

render() { 
    return (
    <View> 
     <Modal visible> 
     {props.children} 
     </Modal> 
     <View style={{ zIndex: 1000 }}> 
     <Text>Loading...</Text> 
     </View> 
    </View> 
); 
} 

私は<Modal>の使用を停止し、Modalように振る舞うでしょう定期的なアニメーション<View>を作成することができると思いますが、私はむしろ、別の解決策を見つけるだろう。

Answer 1

あなたがモーダルではないビューの一方のz屈折率（および十分であろう値1のz屈折率）を変更する必要があります

render() { 
    return (
    <View> 
     <Modal visible style={{ zIndex: 1 }}> 
     {props.children} 
     </Modal> 
     <View> 
     <Text>Loading...</Text> 
     </View> 
    </View> 
); 
} 

概して大きいz屈折率を持つ要素下位の要素（MDN docs）をカバーします。

EDIT：

別の解決策は、要素の順序を変更することです：

render() { 
    return (
    <View> 
     <View> 
     <Text>Loading...</Text> 
     </View> 
     <Modal visible> 
     {props.children} 
     </Modal> 
    </View> 
); 
} 

モーダルビューの上に既にあるので、あなたがz-indexを必要としないこのソリューションでは。