每当我把这个视图的位置样式设为"绝对"时，它就会消失。我不知道为什么会发生这种情况。
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 }
});
当我删除与styles.textView和styles.imageView一起添加的内联样式：(位置："绝对")时，它们都将再次可见。但出于某种原因，我想使位置成为绝对位置，但随后它们就消失了。我不知道为什么。谁能解释一下？
编辑：它适用于iOS。它在安卓上给出了这个错误。零食网址： https://snack.expo.io/Hy_oRrvOM
问题是TouchableOpacity的宽度和高度为零！ 因为其中的内容是绝对的，所以您需要为其中一个子项设置(左、右、上、下)或为TouchableOpacity本身设置宽度和高度
为什么它可以在iOS中工作？
因为在iOS中UIView默认情况下不会剪辑其子项，因此实际上TouchableOpacity的宽度和高度仍然为零，但是子项溢出了，您可以看到它们， 有一个标志(文档)
但在安卓中，ViewGroup总是剪辑它的孩子
如何解决这样的问题？
有一些工具可以在运行时调试 UI，但我认为 react-native 中最简单的方法是backgroundColor从根视图设置为目标视图！
因此，例如在这种情况下：首先为mainView设置backgroundColor，然后如果它确实显示，则为parentView设置backgroundColor，然后为TouchableOpacity设置，您可以看到它没有显示TouchableOpacitybackgroundColor，因为width和height为零，在每个步骤中，您可以手动设置width和height以确保问题
将zIndex:100添加到您的属性中。为我工作。不完全是，你只需要为你的zIndex参数放一个足够高的值，把它放在其他参数之上。
我通过给父组件一个flex来解决我的问题：
position:'relative',
flex:1
只是放下它，这样它就可以对人们有所帮助。
我刚刚遇到了这个问题，似乎为"绝对"定位元素的父元素指定 minWidth 和 minHeight 可以解决问题。
编辑：实际上指定宽度和高度也可以解决它。
这是更新的小吃。请参阅第 11 行。
看起来 z 索引从上到下都在工作。
如果不手动设置 zIndex，则绝对定位的组件应按代码中的外观/行号顺序较低，以便覆盖其下方的内容。
所以
<Underlay/>
然后
<AbsolutelyPositioned/>
而不是相反。
我无法发表评论，因为我没有足够的代表，但是，除了Amir Khorsandi所说的之外，您还可以使用onLayout查看您获得的价值。这样，您可以在远程控制台日志中看到它，甚至是所述视图的 x 和 y。我希望它有所帮助。
<View onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout; console.log(x, y, width, height)}}>
以上所有解决方案我都尝试过，但没有一个对我有用。这是我的观点风格。
modal_continue_button:{
top:0,
backgroundColor:greentext ,
width:150,
height:40,
borderTopLeftRadius:30,
borderBottomLeftRadius:30,
alignItems:"center",
justifyContent:"center",
position:"absolute",
bottom:5,
zIndex:100,
},
最后，我通过将 transform 属性添加到样式元素找到了解决方案。现在它穿得很好。
modal_continue_button:{
top:0,
backgroundColor:greentext ,
width:150,
height:40,
borderTopLeftRadius:30,
borderBottomLeftRadius:30,
alignItems:"center",
justifyContent:"center",
position:"absolute",
bottom:5,
zIndex:100,
transform: [{ scale: 1.1 }]
},
可以更改转换属性以获取所需的输出。
我已经解决了这个问题。
<View style={styles.container}>
<Text>Rooms Tab. {id}</Text>
<View style={styles.fab}>
<TouchableOpacity>
</TouchableOpacity>
<AntDesign name="plus" size={30} color="#ffffff" />
</View>
</View>
container: {
height: '100%',
},
fab: {
height: 50,
width: 50,
backgroundColor: colors.primary,
borderRadius: 50,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
bottom: 1,
right: 1,
zIndex: 100
}
基本上<view>标记更高的zIndex，所以它会隐藏在 prev 绝对元素后面，所以尝试添加负zIndex：-1
<GooglePlacesAutocomplete .... styles={{ ..... listView: styles.listView, }} />
<View style={styles.field}> .... </View>
field: { zIndex: -1 },
注意：上方GooglePlacesAutocomplete下拉列表隐藏在下方视图元素下。所以只有zIndex： -1会给出解决方案。一定要试试这个解决方案