web-dev-qa-db-fra.com

Apportez la vue au-dessus de Modal en utilisant le style zIndex avec React-Native

zIndex a été introduit récemment dans React-Native pour changer la position d'un View dans la pile de couches.

Cependant, je ne suis pas en mesure d'apporter un View au-dessus d'un composant Modal.

Mon code ressemble à ceci:

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

Je suppose que je pourrais arrêter d'utiliser <Modal> et créez une animation régulière <View> qui se comporterait comme le Modal, mais je préfère trouver une autre solution.

Une idée?

javascriptandroidiosreact-native
22
alexmngn

Aucune manipulation de zIndex n'amènera malheureusement quelque chose au-dessus d'un Modal natif réactif. Le composant Modal est une vue native qui se trouve au-dessus du reste de votre application native native. La seule façon de mettre quelque chose au-dessus est de mettre quelque chose dans le modal lui-même, ou alternativement d'utiliser une implémentation js uniquement d'un Modal.

Soit dit en passant, la version React-Native-Community de Modal est également construite sur le modal React-Native, donc aurait le même problème. Il y a une discussion sur l'implémentation de js différents ici: https://github.com/react-native-community/react-native-modal/issues/145

1
Jordan Davis

Vous devez changer le z-index du modal et non celui de la vue (et un z-index de valeur 1 suffirait):

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

Un élément avec un z-index plus grand couvre généralement un élément avec un indice inférieur ( MDN docs ).

MODIFIER:

Une autre solution consiste à changer l'ordre des éléments:

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

Avec cette solution, vous n'avez pas besoin de z-index car le modal est déjà en haut de la vue.

0
Kerumen

Pas possible avec le modal. Comme le modal doit toujours être affiché quel que soit le zIndex qui lui est attribué et les autres composants de l'écran

Il vous sera toujours montré à moins que vous ne rendiez visible = false

Pour mettre en œuvre ce que vous voulez. Vous pouvez utiliser une vue absolument positionnée avec une astuce zIndex pour déplacer cette vue en arrière et en avant.

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