列表视图顶部的覆盖视图？

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”只是返回一个包含一些文本的视图。但做下面的工作：

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