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

那不起作用。顺便说一句，我的＆＃34; DropDown＆＃34;只返回一个带有一些文本的视图。但是执行以下操作确实有效：

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

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

1 个答案: