2015-04-04 30 views
19

Ho un'app con una visualizzazione elenco a schermo intero. Mi piacerebbe aggiungere una nuova gerarchia di viste in primo piano (bloccherebbe parzialmente la vista elenco e fluttuerebbe sopra). Un po 'come Tweetbot, servirà come una finestra di messaggio a cascata che si sovrappone alla vista elenco.Visualizzazione sovrapposizione nella parte superiore della visualizzazione elenco?

Non riesco a capire il codice di rendering corretto per raggiungere questo obiettivo. Sono stato in grado di impostare la posizione su assoluto su ListView e sulla visualizzazione mobile per sovrapporli, ma non riesco a capire come espandere ListView a schermo intero (flex: 1) e avere la casella mobile in cima.

+1

Fornire un codice. – fuesika

risposta

23

Quindi penso di aver capito questo dopo aver composto un semplice esempio per questo post. I seguenti lavori di galleggiare un punto di vista rispetto ad un altro:

'use strict'; 

var React = require('react-native'); 

var { 
    AppRegistry, 
    StyleSheet, 
    View, 
} = React; 

var styles = StyleSheet.create({ 
    fullScreen: { 
     flex:1, 
     backgroundColor: 'red', 
    }, 
    floatView: { 
     position: 'absolute', 
     width: 100, 
     height: 100, 
     top: 200, 
     left: 40, 
     backgroundColor: 'green', 
    }, 
    parent: { 
     flex: 1, 
    } 
}); 


var Example = React.createClass({ 

    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <View style={styles.floatView}/>{/* WORKS FOR REGULAR VIEW */} 
      </View> 
     ); 
    }, 


}); 

module.exports = Example; 

Quello che cercavo di fare era galleggiare un'altra classe personalizzata, così ho sostituito il codice di rendering w/il seguente:

var Example = React.createClass({ 
    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <DropDown style={styles.floatView}/>{/* DOES NOT WORK FOR CUSTOM VIEW */} 
      </View> 
     ); 
    }, 
}); 

che non ha lavoro. A proposito, il mio "DropDown" restituisce solo una vista con del testo al suo interno. Ma funziona come segue:

var Example = React.createClass({ 

    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <View style={styles.floatView}>{/* WORKS FOR CUSTOM VIEW */} 
        <DropDown /> 
       </View> 
      </View> 
     ); 
    }, 
}); 
+0

il tuo componente DropDown potrebbe non passare il puntello di stile alla sua vista. Avrei bisogno di vedere la definizione di DropDown. – jhsu

+1

Grazie. Impostare la posizione ': 'absolute'' e giocare con i valori' top', 'left' fa il trucco. Ho dovuto aggiungere un'altra vista con '{flex: 1, justifyContent: 'center'}' per allineare al centro la mia vista mobile. –

Problemi correlati