如何将绝对位置应用到React Native中的自定义组件?
问题描述:
这是什么stange,但你可以看到这里:https://snack.expo.io/B1_5TLFvW自定义组件“Cualquiera”没有绝对位置定位,它显示在堆栈中,就像一个列表,和视图组件是好的,如果我改变“class Cualquiera延伸到组件“到”类Cualquiera扩展视图“它然后它正确的位置,我有我的代码中的自定义组件,即使我将它设置为扩展视图,但它没有采取绝对位置,它也将组件显示为列表。我怎样才能使它扩展Component的绝对位置?如何将绝对位置应用到React Native中的自定义组件?
谢谢!
这里的代码
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,
},
});
答
的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
]}
/>
)
}
ohh所以你不能将样式应用到自定义对象?我不知道..谢谢你,是的,该选项的作品[点心演示](https://snack.expo.io/B1_5TLFvW) – Frazko
@Frazko我建议学习更多关于React的基础知识以了解道具如何通过下。它会帮助你很多。如果我的回答对你有帮助,请作为回答upvote并接受:) –
肯定的事情,我正在学习..谢谢! – Frazko