React Native组件Text不显示问题：移除特定样式后恢复显示

原组件代码 #

import { StyleSheet, Text, View, Image } from 'react-native';
import React, { Component } from 'react';

interface AvatarProps {
  fullName: string;
  membership: string;
}

export default class Avatar extends Component<AvatarProps> {
  render() {
    const { fullName, membership } = this.props;

    return (
      <View style={styles.profileBar}>
        <Image style={styles.image} source={{uri: './test.png'}} />
            <View style={styles.textContainer}>
                <Text style={styles.fullName}>{fullName}</Text>
                <Text style={styles.membership}>{membership}</Text>
            </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    profileBar: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: 10,
      gap: 7,
    },
    image: {
        width: 40,
        height: 40,
        borderRadius: 50,
    },
    textContainer: {
        marginLeft: 10,
        flex: 1,
    },
    fullName: {
        fontSize: 18,
        color: '#F2F2F2',
    },
    membership: {
        fontSize: 14,
        color: '#DEDEDE',
    },
});

问题描述 #

上述TypeScript编写的React Native Avatar组件中，fullName和membership对应的Text组件无法显示，但移除以下样式代码后，文本即可正常显示：

profileBar: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: 10,
      gap: 7,
    },
    image: {
        width: 40,
        height: 40,
        borderRadius: 50,
    },

项目中其他TypeScript组件运行正常，仅该组件出现此问题。

问题原因 #

1. 本地图片加载方式错误
   React Native中加载项目内的本地图片，必须使用require('./test.png')的方式，而不是{uri: './test.png'}。uri属性仅适用于网络图片或应用沙盒内的本地文件路径，无法识别项目相对路径的图片资源。

当使用错误的uri方式加载图片时，图片会加载失败，但Image组件因设置了固定宽高，仍会占据40x40的布局空间。此时profileBar的flexDirection: 'row'和alignItems: 'center'布局规则，会因加载失败的Image组件导致Flex布局计算异常，间接挤压了Text组件的显示空间，导致文本无法正常渲染。

2. 文本颜色与背景对比度不足
   fullName和membership的文本颜色分别为#F2F2F2和#DEDEDE，均为浅灰色系。如果profileBar或其父容器的背景色也是浅色（如白色），文本会因颜色对比度太低而难以分辨。当移除profileBar的样式后，布局变为默认的垂直排列，文本所在区域的背景色对比变强，因此文本能够显示。

内容的提问来源于stack exchange，提问作者Shahin Babayev