组件数组中仅显示一个组件答案

【问题标题】：Only one component is displaying from array of components组件数组中仅显示一个组件
【发布时间】：2018-03-17 08:04:25
【问题描述】：

我正在使用 react-native-vactor-icons 来绘制评级星，我将每个星推入数组中，然后在渲染中显示这个数组，但只显示一个星。我的代码是

getStarsFromRating = (rating) => {
  let stars = []
  for(let i = 1; i<=5; i++) {
    let result = rating - i
    if(result >= 0){
      stars.push(<Icon name='md-star' size={20} style={[{top: 15, right: 15, position: 'absolute', backgroundColor: 'transparent'}]} key={i} color="#f57365" />)
    } else if(result < 0 && result > -1) {
      stars.push(<Icon name='md-star-half' size={20} style={[{top: 15, right: 15, position: 'absolute', backgroundColor: 'transparent'}]} key={i} color="#f57365" />)
    } else {
      stars.push(<Icon name='md-star-outline' size={20} style={[{top: 15, right: 15, position: 'absolute', backgroundColor: 'transparent'}]} key={i} color="#f57365" />)
    }
  }
  return stars
}

在渲染函数中我这样称呼它

<View style={styles.rowBottomInternal}>
   <Text style={styles.restaurantName}>{item.get('name')}</Text>
   {getStarsFromRating(item.get('rating'))}
</View>

我的风格是：

rowBottomInternal: {flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'},
restaurantName: { color: '#525257', fontSize: 24, fontFamily: 'MyriadPro-Regular' }

我得到这样的东西：

我怎样才能在这里显示 5 星或者我在这里做错了什么？

【问题讨论】：

所有星星都有相同的风格style={[{top: 15, right: 15, position: 'absolute'...。看起来它们是重叠的。在开发者工具中查看。
有时小细节会让你很难过。是的，谢谢，这就是问题所在。

标签： reactjs react-native react-redux react-native-ios vector-icons

【解决方案1】：

这可能是因为它们都将位置设置为绝对。你能看到所有五个组件都加载到了 react devtools 中吗？

【讨论】：