从组件阵列中只显示一个组件

Question

我正在使用 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颗星，或者我在这里做错了什么？

Answer 1

可能是因为所有人都将职位设定为绝对。你能看到所有五个组件都装在react devtools中吗？