函數未在 React Native 中定義

Question

我正在 React Native 中創建一個圓形進度條，錯誤是 get isrotateByStyle' 未定義。

這是我在一篇文章的幫助下設計的代碼。 這必須根據某些參數繪制帶有進度的圓圈。我正在使用 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 。

在方法中，this 指的是所有者對象。 單獨而言， this 指的是全局對象。 在函數中，this 指的是全局對象。 在函數中，在嚴格模式下，這是未定義的。 在事件中，this 指的是接收事件的元素。 call() 和 apply() 等方法可以將 this 引用到任何對象。

官方： JS這個

Answer 2

您收到此錯誤是因為您需要使用const, let or var關鍵字來初始化變量。

所以你的情況rotateByStyle = ...和renderThirdLayer = ...變量應該使用上述任何聲明提到的關鍵字如： - const rotateByStyle = ...對它們進行定義和工作。

Answer 3

我試過 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>
    }
}