每当我将这个视图的位置样式设置为"绝对"时,它就会消失.我不知道为什么会这样.
import React, { Component } from 'react';
import { Text, View, Image, TouchableOpacity, StyleSheet } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.mainView}>
<View
style={styles.parentView}>
<TouchableOpacity
activeOpacity={0.9}
onPress={() => {}}>
<View
style={ [{position: 'absolute'}, styles.textView] }>
<Text style={styles.textViewText}>
Just Another Cat
</Text>
</View>
<Image
style={[{position: 'absolute'}, styles.imageView]}
source={{ uri: 'https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg' }}
/>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mainView: { flexDirection: 'row', flex: 1 },
parentView: { alignSelf: 'center', flex: 0.5, left: 10, elevation: 3, alignItems: 'flex-start' },
textView: { width: 250, height: 250, opacity: 1, borderRadius: 125, backgroundColor: '#aaa034' },
textViewText: { textAlign: 'center', padding: 10, color: '#ffffff', fontSize: 18, top:0, right:0, bottom:0, left:0, textAlignVertical: 'center', position: 'absolute' },
imageView: { width: 250, height: 250, borderRadius: 125, borderColor: '#000000', borderWidth: 0.2 }
});
当我删除内联样式时:(position:'absolute')添加在样式旁边.文本视图和样式.imageView,它们都将再次可见.但出于某种原因,我想让这个位置绝对化,但之后它们就消失了.我不知道为什么.有人能解释一下吗?
编辑:它在iOS中工作.它在android上引发了这个漏洞.零食网址:https://snack.expo.io/Hy_oRrvOM