Question

我想创建一个循环进度条，在8秒或更长时间内完成我使用此代码但没有工作

   import React,{Component} from 'react';
import {
  Image,
  AppRegistry,
  StatusBar,
  StyleSheet,
  TouchableOpacity,
  View,Alert,Animated,Text
} from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import Camera from 'react-native-camera';
import timer from 'react-native-timer';
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  overlay: {
    position: 'absolute',
    padding: 16,
    right: 0,
    left: 0,
    alignItems: 'center',
  },
  topOverlay: {
    top: 0,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  bottomOverlay: {
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.4)',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  captureButton: {
    padding: 10,
    backgroundColor: 'white',
    borderRadius: 20,
  },
  typeButton: {
    padding: 5,
  },
  flashButton: {
    padding: 5,
  },
  buttonsSpace: {
    width: 10,
  },
});
const MAX_POINTS = 500;
export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.camera = null;

    this.state = {
      camera: {
        aspect: Camera.constants.Aspect.fill,
        captureTarget: Camera.constants.CaptureTarget.cameraRoll,
        type: Camera.constants.Type.back,
        orientation: Camera.constants.Orientation.auto,
        flashMode: Camera.constants.FlashMode.auto,
      },
      isRecording: false,
      timer1:0,
      points: 0,
      fill:0,
    };
  }
  componentDidMount() {
    this.refs.circularProgress.performLinearAnimation(100, 8000);
  }
  takePicture = () => {
    if (this.camera) {
      this.camera.capture()
        .then((data) => console.log(data))
        .catch(err => console.error(err));
    }
  }

  startRecording = () => {     
    if (this.camera) {
      this.camera.capture({mode: Camera.constants.CaptureMode.video})
          .then((data) => console.log(data))
          .catch(err => console.error(err));
      this.setState({
        isRecording: true},()=>timer.setTimeout(this,'dfdf',()=>this.setState({isRecording:false}),8000)
      );
      this.camera.stopCapture();
    }

  }
  stopRecording = () => {
    if (this.camera) {
      this.camera.stopCapture();
      this.setState({
        isRecording: false
      });
    }
  }

  switchType = () => {
    let newType;
    const { back, front } = Camera.constants.Type;

    if (this.state.camera.type === back) {
      newType = front;
    } else if (this.state.camera.type === front) {
      newType = back;
    }

    this.setState({
      camera: {
        ...this.state.camera,
        type: newType,
      },
    });
  }

  get typeIcon() {
    let icon;
    const { back, front } = Camera.constants.Type;

    if (this.state.camera.type === back) {
      icon = require('./ic_camera_rear_white.png');
    } else if (this.state.camera.type === front) {
      icon = require('./ic_camera_front_white.png');
    }

    return icon;
  }

  switchFlash = () => {
    let newFlashMode;
    const { auto, on, off } = Camera.constants.FlashMode;

    if (this.state.camera.flashMode === auto) {
      newFlashMode = on;
    } else if (this.state.camera.flashMode === on) {
      newFlashMode = off;
    } else if (this.state.camera.flashMode === off) {
      newFlashMode = auto;
    }

    this.setState({
      camera: {
        ...this.state.camera,
        flashMode: newFlashMode,
      },
    });
  }

  get flashIcon() {
    let icon;
    const { auto, on, off } = Camera.constants.FlashMode;

    if (this.state.camera.flashMode === auto) {
      icon = require('./ic_flash_auto_white.png');
    } else if (this.state.camera.flashMode === on) {
      icon = require('./ic_flash_on_white.png');
    } else if (this.state.camera.flashMode === off) {
      icon = require('./ic_flash_off_white.png');
    }

    return icon;
  }
    render() {

const fill = this.state.points / MAX_POINTS * 100;
    return (

      <View style={styles.container}>
        <StatusBar
          animated
          hidden
        />
        <Camera playSoundOnCapture={false} captureQuality="720p"
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={this.state.camera.aspect}
          captureTarget={this.state.camera.captureTarget}
          type={this.state.camera.type}
          flashMode={this.state.camera.flashMode}
          onFocusChanged={() => {}}
          onZoomChanged={() => {}}
          defaultTouchToFocus
          mirrorImage={false}
        />
        <View style={[styles.overlay, styles.topOverlay]}>
          <TouchableOpacity
            style={styles.typeButton}
            onPress={this.switchType}
          >
            <Image
              source={this.typeIcon}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.flashButton}
            onPress={this.switchFlash}
          >
            <Image
              source={this.flashIcon}
            />
          </TouchableOpacity>
        </View>
        <View style={[styles.overlay, styles.bottomOverlay]}>
          {
            !this.state.isRecording
            &&
            <TouchableOpacity
                style={styles.captureButton}
                onPress={this.takePicture}
            >
              <Image
                  source={require('./ic_photo_camera_36pt.png')}
              />
            </TouchableOpacity>
            ||
            null
          }
          <View style={styles.buttonsSpace} />
          {
              !this.state.isRecording
              &&
              <TouchableOpacity
                  style={styles.captureButton}
                  onPress={this.startRecording}
              >
                <Image
                    source={require('./ic_videocam_36pt.png')}
                />
              </TouchableOpacity>
              ||
              <TouchableOpacity
                  style={styles.captureButton}
                  onPress={this.stopRecording}
              >
<View style={{alignContent:'center',justifyContent:'center'}}>
                <Image
                    source={require('./ic_stop_36pt.png')}
                >
 <AnimatedCircularProgress
      size={40}
      width={5}
      fill={fill}
      tintColor="#00e0ff"
      backgroundColor="#3d5875"
      ref='circularProgress'
    />
</Image>
</View>


              </TouchableOpacity>
          }
        </View>
      </View>
    );
  }
}
AppRegistry.registerComponent('CameraBuild', () => Example);

我得到的代码 https://github.com/bgryszko/react-native-circular-progress 我在相机停止按钮上添加相机我调用动画，但为此，这不起作用

Answer 1

您不需要重新定义函数performLinearAnimation，您应该将一些配置传递给组件。这样的事情应该有效：

export default class Example extends React.Component {
componentDidMount(){
    this.refs.circularProgress.performLinearAnimation(100, 8000);
}

render() {
  return (
    <AnimatedCircularProgress
      size={120}
      width={15}
      fill={fill}
      tintColor="#00e0ff"
      backgroundColor="#3d5875"
      ref='circularProgress'
    />
  );
  }
}
AppRegistry.registerComponent('CameraBuild', () => Example);

Answer 2

我已添加拉取请求以根据持续时间获取它

https://github.com/bgryszko/react-native-circular-progress/pull/131

只需将来自circleProgress的performLinearAnimation方法调用到come构造函数中，即可使用

循环进度条如何完成，反应原生的持续时间

2 个答案: