1.0.6 • Published 7 years ago
react-native-sf-stars
安装
- npm i react-native-sf-stars
Props
| parameter | type | required | description | default |
|---|
| starWith | Number | yes | 单个星星的宽度 | null |
| starNumber | Number | yes | 选中星星的个数 | 0 |
| starImage | Number | yes | 选中星星的图片 | null |
| starBgImage | Number | yes | 未选中星星的图片 | null |
| starDisabled | bool | no | 是否可以点击星星 | true |
| starSpace | Number | no | 星星之间的间距 | 5 |
| style | object | no | 可设置除宽度,高度,布局外的属性(例如:margin) | null |
| MaxStar | Number | yes | 最大星星个数 | 5 |
Methods
| Methods | Params | Param Types | description | Example |
|---|
| starSelectIndex | index | Number | 获取点击星星的index | starSelectIndex={this.starSelect} |
Demo
import React, {Component} from 'react'
import {
View,
Dimensions,
Text,
Image,
ScrollView,
TextInput,
TouchableWithoutFeedback,
} from "react-native"
import SFSatrs from 'react-native-sf-stars'
export default class commonUser extends Component{
componentDidMount(){
}
render(){
return (
//需要交互点击
<SFSatrs starImage={require('../../res/start.png')}
starBgImage={require('../../res/startbg.png')}
starNumber={0}
starWidth={50}
starSpace={10}
starDisabled={false}
starSelectIndex={this.starSelect}
MaxStar={7}
<!-- style={{margin:10}}-->
/>
//不需要交互点击
<SFSatrs starImage={require('../../res/start.png')}
starBgImage={require('../../res/startbg.png')}
starNumber={0}
starWidth={50}
starSpace={10}
MaxStar={7}
<!-- style={{margin:10}}-->
/>
)
}
starSelect=(index)=>{
}
}