Comment puis-je poser des vues en utilisant le positionnement absolu au lieu de flex?

Réagir natif ne permet pas de zIndex et suggère plutôt la superposition des vues basées sur l'ordre qu'ils sont rendus dans. J'ai un module sur la moitié supérieure de mon écran et l'autre sur le fond, je veux le module sur le dessus pour avoir une ombre qui chevauche celle du bas. Afin de parvenir à cela, je l'ai rendu à la moitié inférieure d'abord. Assez facile avec le positionnement absolu droite?

Mon réagir styles:

topContainer: {
    position: 'absolute',
    top: 0,
    left: 0, 
    right: 0,
    height: 200,
    backgroundColor: '#cccccc',
    shadowColor: "#000000",
    shadowRadius: 10,
    shadowOpacity: 0.5,
    shadowOffset: {
      h: 0,
      w: 0
    },
},
bottomContainer: {
    position: 'absolute',
    top: 100,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#333'
}

Mon JSX:

<View>
    <View style={styles.bottomContainer}>
        <ContentView results={this.state.results} />
    </View>
    <View style={styles.topContainer}>
        <SearchBar onSearch={this.onSearch} />
    </View>
</View>

Mais quand je fais cela, le bottomContainer de ne pas remplir l'écran, elle est conforme à son contenu. Mais en raison de la variété de tailles d'écran que je ne peux pas mettre une certaine taille en pixels pour la hauteur et je suis donc coincé.

OriginalL'auteur jamal | 2015-04-15