列表視圖頂部的覆蓋視圖？

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