React Native仅首个PropertyTile渲染 后续元素不显示

问题出在PropertyTile组件的根容器样式配置：

• 你给PropertyTile最外层container设置了height: '100%'，第一个渲染的PropertyTile会直接占满父容器（HomeScreen的screenContainer）的全部可用高度
• 后面的两段测试文本、第二个PropertyTile全部被挤到父容器可视区域外，自然不会显示在屏幕上

1. 删掉PropertyTile样式里container下的height: '100%'配置即可，组件高度会由内部的图片、文本内容自动撑开，不会强行占满父容器空间
   修改后的container样式参考：

const styles = StyleSheet.create({
  container: {
    paddingTop: 8,
    paddingHorizontal: 8,
    borderRadius: 6,
    overflow: 'hidden'
  },
  // 其余原有样式不用改
})

2. （必做优化，不然内容超出屏幕后无法滑动查看）多个PropertyTile的总高度肯定超过单屏高度，把HomeScreen的最外层容器从View换成ScrollView，支持纵向滚动浏览所有内容，修改后的HomeScreen代码参考：

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

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

const styles = StyleSheet.create({
  header: {
    fontSize: 22
  },
  screenContainer: {
    flex: 1
  }
})

export default HomeScreen

说明：ScrollView默认就是纵向排列子元素，原来写的display: 'flex'、flexDirection: 'column'都可以删掉，给容器加flex: 1是为了让ScrollView占满整个屏幕的可用空间。

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