1

私はreact-native-vactor-iconsを使用して評価星を描画しており、各星を配列にプッシュしてから、この配列をレンダリングに表示していますが、表示されている星は 1 つだけです。私のコードは

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

それらのすべてが絶対位置に設定されていることが原因である可能性があります。5 つのコンポーネントすべてが react devtools に読み込まれていることがわかりますか?

于 2018-03-17T08:13:07.077 に答える