React Nativeのカスタムコンポーネントに絶対位置を適用するにはどうすればいいですか？

Question

これはstangeですが、ここで見ることができます：https://snack.expo.io/B1_5TLFvWカスタムコンポーネント "Cualquiera"は絶対位置に配置されていないので、リストのようにスタックに表示され、Viewコンポーネントは変わります。 "class Cualquiera extendsコンポーネント "から"クラスCualquiera extends 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, 
}, 
}); 

Answer 1

Cualquieraコンポーネントはカスタムコンポーネントです。あなたが渡すスタイル小道具は、スタイリングには使用されません。スタイルを渡したい場合は、style propを次のように表示スタイルpropに渡します。

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