列表视图顶部的叠加视图？

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"只返回一个带有一些Text的视图.但是执行以下操作确实有效:

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