Je crée une barre de progression circulaire dans React native et l'erreur est que "rotateByStyle" n'est pas définie.
C'est un code que j'ai conçu avec l'aide d'un article. Cela doit dessiner le cercle avec la progression basée sur certains paramètres. J'utilise ES6 pour définir la fonction
import React,{Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';
rotateByStyle = (percent, base_degrees, clockwise) => {
let rotateBy = base_degrees;
if(clockwise) {
rotateBy = base_degrees + (percent * 3.6);
} else {
//anti clockwise progress
rotateBy = base_degrees - (percent * 3.6);
}
return {
transform:[{rotateZ: `${rotateBy}deg`}]
};
}
renderThirdLayer = (percent, commonStyles, ringColorStyle, ringBgColorStyle, clockwise, bgRingWidth, progressRingWidth, innerRingStyle, startDegrees) => {
let rotation = 45 + startDegrees;
let offsetLayerRotation = -135 + startDegrees;
if(!clockwise) {
rotation += 180;
offsetLayerRotation += 180;
}
if(percent > 50) {
return <View style= {[styles.secondProgressLayer,this.rotateByStyle((percent - 50), rotation, clockwise),
commonStyles, ringColorStyle, {borderWidth: progressRingWidth} ]}></View>
} else {
return <View
style={[styles.offsetLayer, innerRingStyle, ringBgColorStyle, {transform:[{rotateZ: `${offsetLayerRotation}deg`}], borderWidth: bgRingWidth}]}>
</View>
}
}
const CircularProgress = ({percent, radius, bgRingWidth, progressRingWidth, ringColor, ringBgColor, textFontSize, textFontWeight, clockwise, bgColor, startDegrees}) => {
const commonStyles = {
width: radius * 2,
height: radius * 2,
borderRadius: radius
};
}
let firstProgressLayerStyle;
let displayThickOffsetLayer = false;
if(percent > 50){
firstProgressLayerStyle = this.rotateByStyle(50, rotation, clockwise);
} else {
firstProgressLayerStyle = this.rotateByStyle(percent, rotation, clockwise);
if( progressRingWidth > bgRingWidth ) {
displayThickOffsetLayer = true;
}
}
let offsetLayerRotation = -135 + startDegrees;
if(!clockwise) {
offsetLayerRotation += 180;
}
export default CircularProgress;
J'attends un cercle circulaire avec une barre de progression
p>
3 Réponses :
rotateByStyle
=>
this.rotateByStyle
rotateByStyle n'est pas inclus dans this .
Dans une méthode, cela fait référence à l'objet propriétaire. Seul, cela fait référence à l'objet global. Dans une fonction, cela fait référence à l'objet global. Dans une fonction, en mode strict, ceci n'est pas défini. Dans un événement, cela fait référence à l'élément qui a reçu l'événement. Des méthodes comme call () et apply () peuvent faire référence à n'importe quel objet.
Officiel: JS This
h1 >
const, let ou var . Donc, dans votre cas, rotateByStyle = ... et renderThirdLayer = ... variables doivent être déclarées en utilisant l'un des mots clés mentionnés ci-dessus, par exemple: - const rotateByStyle = ... pour qu'ils soient définis et fonctionnent.
J'ai essayé const et cela n'a pas fonctionné, j'ai donc utilisé let
let rotateByStyle = (percent, base_degrees, clockwise) => {
let rotateBy = base_degrees;
if(clockwise) {
rotateBy = base_degrees + (percent * 3.6);
} else {
//anti clockwise progress
rotateBy = base_degrees - (percent * 3.6);
}
return {
transform:[{rotateZ: `${rotateBy}deg`}]
};
}
let renderThirdLayer = (percent, commonStyles, ringColorStyle, ringBgColorStyle, clockwise, bgRingWidth, progressRingWidth, innerRingStyle, startDegrees) => {
let rotation = 45 + startDegrees;
let offsetLayerRotation = -135 + startDegrees;
if(!clockwise) {
rotation += 180;
offsetLayerRotation += 180;
}
if(percent > 50) {
return <View style= {[styles.secondProgressLayer,this.rotateByStyle((percent - 50), rotation, clockwise),
commonStyles, ringColorStyle, {borderWidth: progressRingWidth} ]}></View>
} else {
return <View
style={[styles.offsetLayer, innerRingStyle, ringBgColorStyle, {transform:[{rotateZ: `${offsetLayerRotation}deg`}], borderWidth: bgRingWidth}]}>
</View>
}
}
Dans ce cas, "this" signifie CircularProgress, rotateByStye est hors de cela. Enlève ça"! RotationByStyle est OK. Je recommande d'utiliser const pour déclarer une fonction à tout moment. Par exemple, const rotateByStyle =