React Native 文本不显示

Question

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',
    },
});

在此代码中我看不到我的全名和会员资格。当我删除这个样式时

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

我可以看到全名和会员资格文本。问题是什么 ？不要忘记所有组件是打字稿组件。所有其他组件都正常工作。只有这个组件才会出现这个错误。

Answer 1

您需要从

flex: 1

上的

textContainer

中删除

styles

：

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

您可以在这个Expo Snack上看到完整的示例。