如何将绝对位置应用于React Native中的自定义组件？

Question

这个东西只有你可以在这里看到：https://snack.expo.io/B1_5TLFvW自定义组件“Cualquiera”不是以绝对位置定位，它在堆栈中显示，就像列表一样，如果我改变了View组件是好的“类Cualquiera扩展到Component”到“class Cualquiera extends View”它然后它正确占据了位置，我的代码中有一个自定义组件，即使我将其设置为扩展View，它也没有占据绝对位置，它显示了组件作为清单。如何使用扩展组件的绝对位置来使其工作？

谢谢!!

这里是代码

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class Position extends Component {
render() {
    return (
    <View style={styles.container}>


        <Cualquiera numero={1} style={styles.box1} />
        <Cualquiera numero={4} style={styles.box4} />

        <View numero={2} style={styles.box2}><Text style={styles.text}>2</Text></View>
        <View numero={3} style={styles.box3}><Text style={styles.text}>3</Text></View>


    </View>
    );
}
}

class Cualquiera extends Component {
render() {
    return (
    <View
        style={{
        backgroundColor: '#49f',
        borderWidth: 0.5,
        borderColor: '#f05',
        padding: 20,
        }}>
        <Text style={styles.text}>{this.props.numero}</Text>
    </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    // flex: 1
},
box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: 'red',
},
box2: {
    position: 'absolute',
    top: 80,
    left: 80,
    width: 100,
    height: 100,
    backgroundColor: 'blue',
},
box3: {
    position: 'absolute',
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor: 'green',
},
box4: {
    position: 'absolute',
    top: 160,
    left: 160,
    width: 100,
    height: 100,
    backgroundColor: 'yellow',
},
text: {
    color: '#ffffff',
    fontSize: 40,
},
});