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

Question

我正在使用 react-native-vactor-icons 来绘制评级星，我正在推动数组中的每颗星，然后在渲染中显示该数组，但只有一颗星正在显示displayed.My代码是

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 中吗？

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

Only one component is displaying from array of components

reactjs

react-native

react-redux

react-native-ios

vector-icons