1

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

4

1 回答 1

1

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

于 2018-03-17T08:13:07.077 回答