Подтвердить что ты не робот

Оверлейный вид сверху списка?

У меня есть приложение с полноэкранным списком. Я хотел бы добавить новую иерархию представлений сверху (она частично заблокировала бы представление списка и поплавок выше). Подобно Tweetbot, он будет отображаться как раскрывающееся окно, в котором отображаются слои над списком.

Я не могу понять правильный код визуализации для этого. Я смог установить абсолютное положение как в ListView, так и в плавающем виде для их слоя, но не могу понять, как развернуть ListView на весь экран (flex: 1) и иметь плавающий блок сверху.

4b9b3361

ОТВЕТЫ

Ответ 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;

То, что я пытался сделать, это поплавок другого пользовательского класса, поэтому я заменил код визуализации w/следующим:

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" просто возвращает View с некоторым текстом в нем. Но выполняется следующее:

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