React Native - 当Android上的绝对位置时视图消失

Question

每当我将此视图的位置样式设置为“绝对”时，它就会消失。我不知道为什么会这样。

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 一起添加的inline-style: (position: 'absolute') 时，它们都将再次可见。但出于某种原因，我想使该位置成为绝对位置，但随后它们就消失了。我不知道为什么。谁能解释一下？

编辑：它适用于 iOS。它在android上给出了这个错误。小吃网址：https://snack.expo.io/Hy_oRrvOM

Answer 1

问题是TouchableOpacity的宽高都为零！因为其中的内容是绝对的，所以您需要为其中一个孩子设置（左、右、上、下）或为TouchableOpacity 本身设置宽度和高度

为什么它适用于 iOS？
因为在 iOS 中UIView 默认不裁剪它的子元素，所以实际上TouchableOpacity 的宽度和高度仍然为零但是子元素溢出并且你可以看到它们， 有一个标志（Docs）

但在 android 中 ViewGroup 总是剪辑它的孩子

如何解决此类问题？
有一些工具可以在运行时调试 UI，但我认为 react-native 中最简单的方法是将 backgroundColor 从根视图设置为目标视图！

例如在这种情况下：首先为mainView 设置backgroundColor，然后如果确实显示，为parentView 设置backgroundColor，然后为TouchableOpacity 设置TouchableOpacity，您可以看到它不显示@987654334 @ of TouchableOpacity 因为其中的width 和height 为零，所以在每个步骤中您可以手动设置width 和height 以确保解决问题

Answer 2

将zIndex:100 添加到您的属性中。为我工作。不完全是，您只需为您的 zIndex 参数设置足够高的值，以将其置于其他参数之上。

Answer 3

我刚刚遇到过这个问题，似乎为“绝对”定位元素的父级指定 minWidth 和 minHeight 可以解决问题。

编辑：实际上指定宽度和高度也可以解决它。

这是更新后的snack。见第 11 行。

Answer 4

我通过给父组件一个 flex 来解决我的问题：

position:'relative',
flex:1

只要放下它，它就会对人们有所帮助。

Answer 5

由于我没有足够的代表，我无法发表评论，但是，除了 Amir Khorsandi 所说的之外，您还可以使用 onLayout 来查看您获得的价值。这样您就可以在远程控制台日志中看到它，甚至是所述视图的 x 和 y。希望对你有帮助。

<View onLayout={(event) => {
                var {x, y, width, height} = event.nativeEvent.layout; console.log(x, y, width, height)}}>

Answer 6

看起来 z-index 是从上到下工作的。

如果不手动设置 zIndex，您的绝对定位组件应该在代码中按外观/行号的顺序排列，以便将其覆盖在其下方的内容之上。

所以

<Underlay/>

然后

<AbsolutelyPositioned/>

而不是相反。

Answer 7

上述所有解决方案我都尝试过，但没有一个对我有用。这是我的观点。

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 }]
    }, 

您可以更改转换属性以获得所需的输出。

Answer 8

我已经解决了这个问题。

        <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
    }