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

Question

这是什么stange，但你可以看到这里：https://snack.expo.io/B1_5TLFvW自定义组件“Cualquiera”没有绝对位置定位，它显示在堆栈中，就像一个列表，和视图组件是好的，如果我改变“class Cualquiera延伸到组件“到”类Cualquiera扩展视图“它然后它正确的位置，我有我的代码中的自定义组件，即使我将它设置为扩展视图，但它没有采取绝对位置，它也将组件显示为列表。我怎样才能使它扩展Component的绝对位置？

谢谢！

这里的代码

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

Answer 1

的Cualquiera组件是一个自定义组件。您传入的样式道具不用于造型。如果你想通过样式，传递样式道具到视图样式道具是这样的：

class Cualquiera extends Component { 
    render() { 
    return (
     <View 
     style={[ 
      { backgroundColor: 'blue'}, // pass in your main styles here 
      this.props.style // styles passed by props will be used 
     ]} 
     /> 
    ) 
    }