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

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

推荐答案

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

Why it works in iOS?

但在安卓系统中,ViewGroup总是剪辑它的子元素

How to solve problems like this?

例如,在这种情况下:首先将backgroundColor设置为mainView,然后如果它确实显示,将backgroundColor设置为parentView,然后设置为TouchableOpacity,您可以看到它没有显示TouchableOpacity中的backgroundColor,因为其中的widthheight为零,在每个步骤中,您可以手动设置widthheight,以确保解决问题

React-native相关问答推荐

在第二次加载时仅将本机应用程序设置为状态

react-native useEffect / useFocusEffect / useCallback 没有正确更新

无法读取 @react-native-async-storage/async-storage 的未定义属性setItem

如何判断 Detox 正在运行测试?

错误:HostFunction 中的异常: Malformed calls from JS: field sizes are different. In an Animated View

react平面列表渲染项

React Native 响应式图像宽度,而图像的宽度/高度比保持不变

Eslint 错误,configuration for rule "import/no-cycle" is invalid

滚动到具有可变元素大小的 FlatList 中的某些索引的有效方法

检索元素的父项时出错:找不到与给定名称android:TextAppearance.Material.Widget.Button.Colored匹配的资源

React-native android 样式化 textInput

你如何在生产模式下运行 react-native 应用程序?

React Native 在升级到 0.56 版本后崩溃

React-Native 按钮居中对齐

如何在 React Navigation createStackNavigator 中更改字体系列

react native图像不适用于特定 URL

使用 applicationIdSuffix 时 React Native 应用程序不会启动

如何将 BuildConfig 值传递给依赖模块?

Xcode 12 - 没有要编译的架构(ONLY_ACTIVE_ARCH=YES,active arch=x86_64,VALID_ARCHS=arm64e armv7s arm64 arm7)

使用行数react-native文本组件