Javascript 组件后没有元素在屏幕上呈现 React Native

我有一个react native项目正在建设中.在主屏幕上，我想呈现一个名为PropertyTile的组件列表，其中包含一些文本，仅供测试使用.在我当前的代码中，它正在呈现PropertyFile的第一个实例，但之后不会呈现任何内容.这是非常奇怪的，我无法找到解决这个问题的办法，因为某种原因.为什么它只显示第一个PropertyTile而不呈现其他任何内容.

代码:

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import PropertyTile from '../components/PropertyTile.js'

const HomeScreen = () => {
  return (
    <View style={styles.screenContainer}>
      <PropertyTile/>
      <Text>Home Screen: Shows currentl asdfasdf!</Text>
      <Text>Home Screen: Shows currentl fe!</Text>
      <PropertyTile />
    </View>
  )
}

const styles = StyleSheet.create({
  header: {
    fontSize: 22
  },
  screenContainer: {
    display: 'flex',
    flexDirection: 'column'
  }
})

export default HomeScreen

current screen rendering

PropertyTile 代码:

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

export default function PropertyTile() {

  let deviceWidth = Dimensions.get('window').width - 16
  var aspectHeight = (deviceWidth / 1.78) + 1

  return (
    <View style={styles.container}>
      <View style={[styles.imageContainer,{height: aspectHeight}]}>
        <Image style={styles.mainImage} source={require('../../assets/luxury-home-1.jpeg')}/>
      </View>
      <View style={styles.contentContainer}>
        <View style={styles.priceContainer}>
          <Text style={styles.price}>$ 1,259,999</Text>
          <Text style={styles.status}>For Sale</Text>
        </View>
        <View style={styles.addressContainer}>
          <Text style={styles.address}>23 Lowlette Lane.</Text>
          <Text style={styles.address}>Mission Viejo, CA 92692</Text>
        </View>
        <View style={styles.separator}></View>
        <View style={styles.details}>
          <Text style={styles.summary}>6 Beds | 6 Baths | 10,000 Sqft. | 1.3 acre Lot</Text>
          <Text style={styles.homeType}>Single Family Residence</Text>
        </View>
        <View style={styles.separator}></View>
        <View style={styles.details}>
          <View style={styles.metricContainer}>
            <Text style={styles.metricName}>Net Operating Income (Monthly): </Text>
            <Text style={styles.metricValue}>$5,789</Text>
          </View>
          <View style={styles.metricContainer}>
            <Text style={styles.metricName}>Cash on Cash Return: </Text>
            <Text style={styles.metricValue}>2.45%</Text>
          </View>
          <View style={styles.metricContainer}>
            <Text style={styles.metricName}>Return on Initial Investment: </Text>
            <Text style={styles.metricValue}>9.97%</Text>
          </View>
        </View>
        <View style={styles.disclaimerContainer}>
          <Text style={styles.disclaimer}>*** 30 year fixed, 20% down, 3.14% interest rate | $3,443 rent ***</Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    paddingTop: 8,
    paddingHorizontal: 8,
    borderRadius: 6,
    overflow: 'hidden'
  },
  imageContainer: {
    width: '100%',
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,
    overflow: 'hidden'
  },
  mainImage: {
    width: '100%',
    height: '100%'
  },
  contentContainer: {
    width: '100%',
    backgroundColor: '#D3D3D3',
    borderBottomLeftRadius: 6,
    borderBottomRightRadius: 6,
    overflow: 'hidden',
    paddingHorizontal: 8
  },
  priceContainer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 8,
  },
  price: {
    fontWeight: 'bold',
    fontSize: 24
  },   
  addressContainer: {
    display: 'flex',
    marginTop: 8
  },
  address: {
    fontSize: 14
  },
  separator: {
    marginHorizontal: '3%',
    marginVertical: 8,
    height: 2,
    width: '94%',
    backgroundColor: 'grey'
  },  
  homeType: {
    marginTop: 4,
  },
  metricContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 4
  },
  metricValue: {
    fontWeight: 'bold'
  },
  disclaimerContainer: {
    display: 'flex',
    flexDirection: 'row',
    marginVertical: 8,
    width: '100%',
    justifyContent: 'center',
  },  
  disclaimer: {
    fontSize: 12,
  }
})