Javascript 函数未在React native中定义

我正在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;   

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet}；
旋转系统样式=（百分比，基准度，顺时针）=>{
让rotateBy=基准度；
如果（顺时针）{
旋转比=基准度+（百分比*3.6）；
}否则{
//逆时针进程
旋转比=基准度-（百分比*3.6）；
}
返回{
转换：[{rotateZ:`${rotateBy}deg`}]
};
}
renderThirdLayer=（百分比、commonStyles、ringColorStyle、ringBgColorStyle、顺时针、bgRingWidth、progressRingWidth、innerRingStyle、startDegrees）=>{
让旋转=45+开始角度；
让offsetLayerRotation=-135+起始角度；
如果（！顺时针）{
旋转+=180；
offsetLayerRotation+=180；
}
如果（百分比>50）{
回来
}否则{
回来
}
}
const CircularProgress=（{百分比，半径，bgRingWidth，progressRingWidth，ringColor，ringBgColor，textFontSize，textFontWeight，顺时针，bgColor，startdgrees}）=>{
const commonStyles={
宽度：半径*2，
高度：半径*2，
边界半径：半径
};
}
让我们以分层的方式；
让displayThickOffsetLayer=false；
如果（百分比>50）{
firstProgressLayerStyle=this.rotateByStyle（50，旋转，顺时针）；
}否则{
firstProgressLayerStyle=this.rotateByStyle（百分比，旋转，顺时针）；
如果（progressRingWidth>bgRingWidth）{
displayThickOffsetLayer=true；
}
}
让offsetLayerRotation=-135+起始角度；
如果（！顺时针）{
offsetLayerRotation+=180；
}
导出默认循环进程；

我希望有一个带进度条的圆形解决方案 =>

为什么？

rotateByStyle

不包括在

中

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

官方：
出现此错误是因为需要使用
const、let或var
关键字初始化变量。
因此，在您的案例中，
rotateByStyle=…
和
renderThirdLayer=…
变量应该声明，使用上述任何关键字，例如：-
const rotateByStyle=…
，以便它们被定义并起作用。
我尝试了const，但它不起作用，所以我使用了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>
    }
}

让旋转体样式=（百分比，基准度，顺时针）=>{
让rotateBy=基准度；
如果（顺时针）{
旋转比=基准度+（百分比*3.6）；
}否则{
//逆时针进程
旋转比=基准度-（百分比*3.6）；
}
返回{
转换：[{rotateZ:`${rotateBy}deg`}]
};
}
让renderThirdLayer=（百分比、commonStyles、ringColorStyle、ringBgColorStyle、顺时针、bgRingWidth、progressRingWidth、innerRingStyle、startDegrees）=>{
让旋转=45+开始角度；
让offsetLayerRotation=-135+起始角度；
如果（！顺时针）{
旋转+=180；
offsetLayerRotation+=180；
}
如果（百分比>50）{
回来
}否则{
回来
}
}
在这种情况下，“this”表示循环前进，rotateByStye不在此范围内。删除“这个”！只需旋转系统就可以了。我建议随时使用const来声明函数。e、 g常数旋转体样式=
rotateByStyle

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