Оверлейный вид сверху списка?

Question

У меня есть приложение с полным списком экранов. Я хотел бы добавить новую иерархию представлений сверху (она частично заблокировала бы представление списка и поплавок выше). Подобно Tweetbot, он будет отображаться как раскрывающееся окно, в котором отображаются слои над списком.

Я не могу понять правильный код визуализации, чтобы достичь этого. Я смог установить абсолютное положение как в ListView, так и в плавающем виде, чтобы не сложить их, но не могу понять, как расширить ListView до полного экрана (flex: 1) и иметь плавающий бокс сверху.

Answer 1

Так что я думаю, что я понял это, составив простой пример для этого сообщения. Следующие работы плавать один вид на другой:

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

То, что я пытался сделать, было плавать другой пользовательский класс, поэтому я заменил рендер код ж/следующий:

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

Это не сделали Работа. Кстати, мой «DropDown» просто возвращает View с некоторым текстом в нем. Но следующие работы:

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