Nakładka widok w widoku listy?

Question

Mam aplikację z pełnym widokiem listy ekranów. Chciałbym dodać na górze nową hierarchię widoków (częściowo zablokowałoby to widok listy i unoszące się nad nim). Podobnie jak w przypadku Tweetbota, będzie on służył jako rozwijane okno wiadomości, które będzie warstwami w widoku listy.

Nie mogę znaleźć odpowiedniego kodu renderowania, aby to osiągnąć. Byłem w stanie ustawić pozycję absolutną zarówno dla ListView, jak i widoku pływającego, aby je ułożyć, ale nie mogę wymyślić, jak rozwinąć ListView do pełnego ekranu (flex: 1) i mieć pływające okienko na górze.

Answer 1

Tak więc wymyśliłem to po skomponowaniu prostego przykładu dla tego postu. Następujące prace unosić jeden widok na inny:

'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; 

Co starałem się robić to unosić inną klasę niestandardową, więc otrzymuje kod renderowania w/następujący:

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> 
     ); 
    }, 
}); 

które nie praca. Przy okazji, moje "DropDown" po prostu zwraca widok z jakimś tekstem. Ale wykonanie następujących czynności:

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> 
     ); 
    }, 
});