react-native - 列表视图顶部的叠加视图？

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