React Native - 当位置在 Android 上是绝对的时，视图消失 [英] React Native - View disappears when position is absolute on Android

问题描述

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

Whenever I made the position style 'absolute' for this view, it disappears. I have no idea why it is happening.

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') 时，它们都将再次可见.但出于某种原因，我想使位置绝对化，但随后它们就消失了.我不知道为什么.谁能解释一下?

When I remove the inline-style: (position: 'absolute') added alongside styles.textView and styles.imageView, they both will be visible again. But I want to make the position absolute for some reason, but then they just disappear. I don't know why. Can anyone explain this?

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

It works in iOS. It's giving this bug on android. Snack URL: https://snack.expo.io/Hy_oRrvOM

推荐答案

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

The problem is the width and height of the TouchableOpacity are zero! because the contents of that are absolute, so you need to set (left, right, top, bottom) for one of the children or set the width and the height for the TouchableOpacity itself

为什么它适用于 iOS?
因为在 iOS 中 UIView 默认不裁剪它的孩子，所以实际上 TouchableOpacity 的宽度和高度仍然为零，但孩子们溢出了，你可以看到它们，有一个标志(文档)

Why it works in iOS?
because in iOS UIView doesn't clip its children by default, so actually TouchableOpacity's width and height are still zero but the children overflowed and you can see them, there is a flag for that (Docs)

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

but in android ViewGroup always clips its children

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

How to solve problems like this?
there are some tools that you can debug UI at runtime, but I think the easiest way in react-native is set backgroundColor from the root view to the target view!

例如在这种情况下:首先为 mainView 设置 backgroundColor 然后如果它确实显示，则为 parentView<设置 backgroundColor/code> 然后是 TouchableOpacity 你可以看到它没有显示 TouchableOpacity 的 backgroundColor 因为 width其中height为零，每一步都可以手动设置width和height，以确保问题

so for example in this case: first set backgroundColor for mainView then if it does show, set backgroundColor for parentView and then for TouchableOpacity and you can see it doesn't show backgroundColor of TouchableOpacity because the width and height of that are zero, in each step you can set width and height manually to ensure about the problem

这篇关于React Native - 当位置在 Android 上是绝对的时，视图消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！