2016-07-14 79 views
5

Come gestire zIndex?zIndex in React Native

ho cercato di indicare il maggior numero dal ScrollView, ma è ancora in fondo (

Senza ScrollView sembra che questo, ma ho bisogno di scorrere verso l'alto per l'immagine.

Grazie

+0

zIndex non è supportato in reagire nativo, fine di collocare gli elementi in determina il suo ordine layout. puoi provare a rendere l'overflow visibile di scrollview. – Abhishek

+0

Credo che zIndex sia supportato nell'ultima versione di react native solo per iOS. Forse controlla l'esempio qui: https://github.com/facebook/react-native/commit/d64368b9e239b574039f4a6508bf2aeb0806121b –

+0

Non penso che questo sia un problema con lo z-index, ma piuttosto che la vista dell'avatar sia stata tagliata ai limiti della sua vista di scorrimento principale. Verifica se puoi aggirare il problema impostando lo stile nella vista di scorrimento in questo modo: '' –

risposta

10

Questa è stata implementata in iOS a partire da 0,30 (vedi la commit changes) e Android a 0,31 (changes)

Ho fatto un semplice componente per esempio come mi sono state usando:

'use-strict'; 

import React, { Component } from 'react'; 
const { View, StyleSheet } = require('react-native'); 

const styles = StyleSheet.create({ 
    wrapper: { 
     flex:1, 
    }, 
    back: { 
     width: 100, 
     height: 100, 
     backgroundColor: 'blue', 
     zIndex: 0 
    }, 
    front: { 
     position: 'absolute', 
     top:25, 
     left:25, 
     width: 50, 
     height:50, 
     backgroundColor: 'red', 
     zIndex: 1 
    } 
}); 

class Layers extends Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <View style={styles.wrapper}> 
       <View style={styles.back}></View> 
       <View style={styles.front}></View> 
      </View> 
     ); 
    } 
} 

module.exports = Layers; 
+2

Quindi nel tuo esempio se inverti l'ordine, carichi gli elementi "indietro" e "frontale", lo zIndex funziona ancora bene? Ti chiedo solo perché ora li stai caricando di nuovo in modo che funzioni indipendentemente da zIndex, giusto? –

+0

Hai ragione nel ritenere che se si inverte l'ordine saranno ancora nello z-index desiderato. Potresti pensare che l'ordine dell'aspetto potrebbe cambiare il layering, ma View funziona molto simile a html Div nel senso che non sono disegnati sullo schermo come livelli, ma finiscono per essere impilati dall'alto verso il basso – Felipe