Star.js 4.29 KB

import { useState } from 'react';
import {post} from 'axios'
import {Dimensions, View,Text,Image,StyleSheet,TouchableOpacity,Modal,TouchableHighlight,Alert} from 'react-native'
import * as React from 'react'
import Star from '../assets/star.svg'
import Star_Half from '../assets/star_half.svg'
import Star_Full from '../assets/star_full.svg'
export default ({ item,setItem,id,navigation,navigateTo,style,width,height,Edit,margin}) => {
    const dummy = ["","","","",""]

    const TouchStar = (i) => {
        setItem(i+1)
    }
    return (
        navigateTo?
        <TouchableOpacity onPress={() => navigation.navigate(navigateTo,{id:id})} 
        style={style? style:{marginLeft:"auto",flexDirection:"row"}}>
            {dummy.map((e,i) => {
                if(i+1 < item) {
                    return (
                        <Star_Full width={width?width:13.92} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]} height={height?height:13}/>
                    )
                }
                else {
                    if (item-i < 0.25) {
                        return <Star  width={width?width:13.92} height={height?height:13} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]}/>
                    }
                    else if (item-i < 0.65) {
                        return <Star_Half height={height?height:13} width={width?width:13.92} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]}/>
                    }
                    else {
                        return <Star_Full  width={width?width:13.92} height={height?height:13} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]}/>
                    }
                }

            })}
        </TouchableOpacity>:Edit? 
        <View  
        style={style? style:{marginLeft:"auto",flexDirection:"row"}}>
            {dummy.map((e,i) => {
                if(i+1 < item) {
                    return (
                        <TouchableOpacity onPressIn={() => TouchStar(i)}>
                            <Star_Full width={width?width:13.92} style={{marginRight:4.1}} height={height?height:13}/>
                        </TouchableOpacity>
                    )
                }
                else {
                    if (item-i < 0.25) {

                        return <TouchableOpacity onPressIn={() => TouchStar(i)}>
                            <Star  width={width?width:13.92} height={height?height:13} style={{marginRight:4.1}}/>
                        </TouchableOpacity>
                    }
                    else if (item-i < 0.65) {
                        return <TouchableOpacity onPressIn={() => TouchStar(i)}>
                            <Star_Half height={height?height:13} width={width?width:13.92} style={{marginRight:4.1}}/>
                        </TouchableOpacity>
                    }
                    else {
                        return <TouchableOpacity onPressIn={() => TouchStar(i)}>
                            <Star_Full  width={width?width:13.92} height={height?height:13} style={{marginRight:4.1}}/>
                        </TouchableOpacity>
                    }
                }

            })}
        </View>:
        <View style={style? style:{marginLeft:"auto",flexDirection:"row"}}>
            {dummy.map((e,i) => {
                if(i+1 < item) {
                    return (
                        <Star_Full width={width?width:13.92}height={height?height:13} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]}/>
                    )
                }
                else {
                    if (item-i < 0.25) {
                        return <Star  width={width?width:13.92} height={height?height:13} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]}/>
                    }
                    else if (item-i < 0.65) {
                        return <Star_Half  width={width?width:13.92} height={height?height:13} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]}/>
                    }
                    else {
                        return <Star_Full  width={width?width:13.92} height={height?height:13} style={[{marginRight:4.1},margin?{marginRight:margin}:{}]}/>
                    }
                }

            })}
        </View>
    )
}

const style = StyleSheet.create({
    text:{
        color:"#707070",
        fontSize:11,
        fontWeight:"900"
    }
})