Question

每当我做出绝对的位置风格＆＃39;对于这种观点，它消失了。我不知道为什么会这样。

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一起添加的内联样式:(位置：＆＃39;绝对＆＃39;）时，它们都将再次可见。但是我想出于某种原因使这个位置绝对，但随后它们就消失了。我不知道为什么。谁能解释一下呢？

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

Answer 1

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

为什么它可以在iOS中使用？
因为在iOS UIView默认情况下不会裁剪其子级，所以实际上TouchableOpacity的宽度和高度仍为零，但子级溢出了，您可以看到它们，有一个标记（Docs）

但是在Android ViewGroup中，它始终会裁剪其子项

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

因此在这种情况下，例如：首先为backgroundColor设置mainView，然后如果确实显示，则为backgroundColor设置parentView，然后为TouchableOpacity设置，您会看到它没有显示backgroundColor中的TouchableOpacity，因为其中的width和height为零，因此，您可以在每个步骤中将width和{手动{1}}以确保解决问题

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

position:'relative',
flex:1

只需将其放下，对人们可能会有帮助。

Answer 5

将zIndex:100添加到您的属性。为我工作。

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
    }

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

8 个答案: