Comment appliquer une position absolue à un composant personnalisé dans React Native?

Question

ce quelque chose d'étrange mais comme vous pouvez le voir ici: https://snack.expo.io/B1_5TLFvW le composant personnalisé "Cualquiera" ne se positionne pas en position absolue, il est en pile, comme une liste, et les composants View sont bons, si je change "class Cualquiera Composant "to" class Cualquiera étend View "alors il prend la position correctement, j'ai un composant personnalisé dans mon code qui ne prend pas les positions absolues même si je l'ai défini pour étendre View, il montre aussi les composants comme liste. Comment puis-je le faire fonctionner avec des positions absolues s'étendant Component?

merci !!

ici le code

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

Le composant Cualquiera est un composant personnalisé. Les styles dans lesquels vous passez ne sont pas utilisés pour le style. Si vous voulez passer dans les styles, passez dans le style prop dans le style de vue prop comme ceci:

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 
     ]} 
     /> 
    ) 
    }