React native 如何在react native中呈现星级组件？

如何创建半色星形

是否可以使用背景视图并将图像用作遮罩？
我尝试了以下方法，但显然失败了

 <View style={styles.container}>
    <View style={{
      position: 'absolute',
      backgroundColor: 'blue',
      width: '80%',
      height: '100%'
    }} />
    <Image source={require('../star.png')}
       style={{
         height: '100%',
         aspectRatio: 1,
         tintColor: 'transparent',
       }} />
 </View>

---

您可以使用此组件执行此操作。但是你应该找到一个很好的恒星图像，其中的恒星必须用颜色填充，恒星的背景色必须是透明的。在本例中，我假设每颗星的宽度为30。您应该将速率值作为

prop

export default class starRate extends Component {
  render() {
    return (
      <View style={{height: 30, width: 150}}>
        <View style={{
          position: 'absolute',
          backgroundColor: 'yellow',
          height: 30,
            width: this.props.rate*30,
        }} />
        <Image source={require('../star.png')}
           style={{
            position: 'absolute',
            left: 0,
            top: 0,
            height: 30,
            width: 150,
           }} />
     </View>
    );
  }
}

导出默认类星号扩展组件{
render（）{
返回(
);
}
}

根据公认的答案，我提出了一个类似的解决方案：

const colors = {background: 'white', color: 'yellow'};
const starIcon = require('../../img/star.png');

const Star = ({rating, inx, size, style} : {rating: number, inx: number, size: number, style: object}) => {
  const emptyIcon = {width: size, height: size, tintColor: colors.background};
  const fullIcon = {width: size, height: size, tintColor: colors.button};

  if(rating >= inx) { return (<Image source={starIcon} style={[ style, fullIcon ]} />); }
  if(rating <= inx-1) { return (<Image source={starIcon} style={[ style, emptyIcon ]} />); }

  const width = ((rating + 1 - inx) * size) | 0;

  return (
    <View style={style}>
      <Image source={starIcon} style={[emptyIcon]} />
      <View style={{ width: width, height: size, overflow: 'hidden', position: 'absolute'}}>
        <Image source={starIcon} style={[fullIcon]} />
      </View>
    </View>
 );
};

const StarsRating = ({rating} : {rating: number}) => {
  return (
    <View style={styles.container}>
      <Star rating={rating} inx={1} size={20} style={styles.icon} />
      <Star rating={rating} inx={2} size={20} style={styles.icon} />
      <Star rating={rating} inx={3} size={20} style={styles.icon} />
      <Star rating={rating} inx={4} size={20} style={styles.icon} />
      <Star rating={rating} inx={5} size={20} style={styles.icon} />
    </View>
  )
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    alignItems: 'flex-start',
  },
  icon: {
    marginLeft: 2,
  }
});

const colors={背景：“白色”，颜色：“黄色”}；
const starIcon=require（'../../img/star.png'）；
常量星=（{rating，inx，size，style}:{rating:number，inx:number，size:number，style:object}）=>{
const emptyIcon={width:size，height:size，tintColor:colors.background}；
const fullIcon={width:size，height:size，tintColor:colors.button}；
如果（评级>=inx）{return（）；}
如果（评级）{
返回(
)
};
const styles=StyleSheet.create({
容器：{
flexDirection:'行'，
背景色：“透明”，
alignItems:'flex start'，
},
图标：{
边缘左：2，
}
});

const colors = {background: 'white', color: 'yellow'};
const starIcon = require('../../img/star.png');

const Star = ({rating, inx, size, style} : {rating: number, inx: number, size: number, style: object}) => {
  const emptyIcon = {width: size, height: size, tintColor: colors.background};
  const fullIcon = {width: size, height: size, tintColor: colors.button};

  if(rating >= inx) { return (<Image source={starIcon} style={[ style, fullIcon ]} />); }
  if(rating <= inx-1) { return (<Image source={starIcon} style={[ style, emptyIcon ]} />); }

  const width = ((rating + 1 - inx) * size) | 0;

  return (
    <View style={style}>
      <Image source={starIcon} style={[emptyIcon]} />
      <View style={{ width: width, height: size, overflow: 'hidden', position: 'absolute'}}>
        <Image source={starIcon} style={[fullIcon]} />
      </View>
    </View>
 );
};

const StarsRating = ({rating} : {rating: number}) => {
  return (
    <View style={styles.container}>
      <Star rating={rating} inx={1} size={20} style={styles.icon} />
      <Star rating={rating} inx={2} size={20} style={styles.icon} />
      <Star rating={rating} inx={3} size={20} style={styles.icon} />
      <Star rating={rating} inx={4} size={20} style={styles.icon} />
      <Star rating={rating} inx={5} size={20} style={styles.icon} />
    </View>
  )
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    alignItems: 'flex-start',
  },
  icon: {
    marginLeft: 2,
  }
});