函数不是在 React native 中定义的

Question

我正在 react native 中创建一个循环进度条，错误是 get is rotateByStyle' 未定义。

这是我在一篇文章的帮助下设计的代码。这必须根据某些参数绘制进度的圆圈。我正在使用 ES6 来定义函数

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;   

我期待一个带有进度条的圆形圆圈

Answer 1

解决方案

this.rotateByStyle

=>

rotateByStyle

为什么

rotateByStyle不包括在this 中。

在方法中，这是指所有者对象。 单独而言，这是指全局对象。 在函数中，这是指全局对象。 在函数中，在严格模式下，这是未定义的。 在事件中，这是指接收事件的元素。 像call（）和apply（）这样的方法可以将其引用到任何对象。

官方：JS这个

Answer 2

您收到此错误是因为您需要使用const, let or var关键字中的任何一个初始化变量。

因此，在您的情况下，rotateByStyle = ...和renderThirdLayer = ...变量应使用上述任何关键字进行声明，例如： - const rotateByStyle = ...定义它们并工作。

Answer 3

我尝试了 const 但它不起作用，所以我使用了让

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>
    }
}