web-dev-qa-db-ja.com

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

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

ただし、Viewコンポーネントの上にModalを配置することはできません。

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

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

<Modal>の使用をやめて、Modalのように動作する通常のアニメーション<View>を作成できると思いますが、別の解決策を見つけたいと思います。

何か案が？

javascriptandroidiosreact-native
22
alexmngn

残念ながら、zIndexを操作しても、反応ネイティブModalを超えることはありません。 Modalコンポーネントは、残りの反応ネイティブアプリケーションの上に位置するネイティブビューです。その上に何かを置く唯一の方法は、モーダル自体に何かを置くか、あるいはモーダルのjs only実装を使用することです。

ちなみに、react-native-communityバージョンのmodalもreact-nativeモーダルに基づいて構築されているため、同じ問題が発生します。ここではさまざまなjs実装についての議論があります： https://github.com/react-native-community/react-native-modal/issues/145

1
Jordan Davis

ビューの1つではなく、モーダルのz-indexを変更する必要があります（値1のz-indexで十分です）。

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

より大きいz-indexを持つ要素は、通常、低いもの（ MDN docs ）を持つ要素をカバーします。

編集：

もう1つの解決策は、要素の順序を変更することです。

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

このソリューションでは、モーダルがすでにビューの上にあるため、z-indexは必要ありません。

0
Kerumen

モーダルでは不可能です。モーダルは、zIndexに与えられたものや画面内の他のコンポーネントに関係なく、常に表示されます。

Visible = falseにしない限り、常に表示されます

あなたが望むものを実装するため。絶対配置のビューをzIndexトリックと一緒に使用して、このビューを前後に移動できます。

render() {
  return (
    <View>
       <View style={{position:'absolute',top:0,bottom:0,left:0,right:0,zIndex:visible?-1:2}}>
          {props.children}
       </View>
       <View style={{ zIndex: 1 }}>
          <Text>Loading...</Text>
       </View>
     </View>
  );
}
0
Swapnil