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

Question

这有点奇怪，但正如您在这里看到的：https://snack.expo.io/B1_5TLFvW 自定义组件 "Cualquiera" 不是绝对位置定位，它显示在堆栈中，就像列表一样，View 组件很好，如果我将 "class Cualquiera extends to Component" 更改为 "class 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 组件是自定义组件。您传递给它的 styles 道具不用于样式。如果要传入样式，将样式属性传入视图样式属性，如下所示：

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

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

How to apply absolute position to custom Component in React Native?

react-native

react-native-android

react-native-ios