Reactjs 如何在react native中设置间隔？

我想将Interval设置为以下视图30秒，我该怎么做

    import React, {PureComponent} from 'react';
import {StyleSheet, Text, TouchableOpacity, View, Animated,ProgressBarAndroid} from 'react-native';
import {RNCamera} from 'react-native-camera';
import Icon from 'react-native-vector-icons/Entypo';
import ImagePicker from 'react-native-image-crop-picker';
import Video from 'react-native-video';
let animation = new Animated.Value(0);

export default class Shoot extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      recording: false,
      processing: true,
      upload: false,
      galleryVideo: '',
      progress: '',
      video: '',
    };
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.upload == true && (
          <TouchableOpacity
            style={{
              backgroundColor: '#e75480',
              position: 'absolute',
              width: 80,
              height: 30,
              zIndex: 2,
              padding: 5,
              borderRadius: 5,
              right: 0,
              justifyContent: 'center',
              alignContent: 'center',
            }}
            onPress={() => this.props.navigation.navigate('Post', {key: 1})}>
            <Text style={{color: 'white', textAlign: 'center'}}>Next</Text>
          </TouchableOpacity>
        )}

        {this.state.upload == false && (
          <TouchableOpacity
            style={{
              position: 'absolute',
              bottom: 0,
              right: '15%',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={this.video.bind(this)}>
            <Icon name="image" size={30} color="white" />
            <Text style={{color: 'white', fontWeight: 'bold'}}>Upload</Text>
          </TouchableOpacity>
        )}

        <TouchableOpacity
          onPress={this.take60sVideo.bind(this)}
          style={{
            width: 60,
            height: 60,
            justifyContent: 'center',
            alignContent: 'center',
            position: 'absolute',
            bottom: 0,
            left: '25%',
          }}>
          <Text style={{textAlign: 'center', color: 'red', fontSize: 15}}>
            60s
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={this.take15sVideo.bind(this)}
          style={{
            width: 60,
            height: 60,
            justifyContent: 'center',
            alignContent: 'center',
            position: 'absolute',
            bottom: 0,
            left: '5%',
          }}>
          <Text style={{textAlign: 'center', color: 'red', fontSize: 15}}>
            15s
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={this.take30sVideo.bind(this)}
          style={styles.capture}></TouchableOpacity>
      
        {this.state.progress === true && (
          <View
            style={{
              borderColor: '#0000FF',
              borderWidth: 1,
              width: '100%',
              height: 15,
              top: 0,
              position: 'absolute',
              bottom: 0,
              zIndex: 2,
            }}>
            <Animated.View
              style={
                ([StyleSheet.absoluteFill],
                {backgroundColor: '#8BED4F', width: '50%', height: 10})
              }
            />
            {/* <ProgressBarAndroid styleAttr="Horizontal"/> */}
          </View>
        )}
        {this.state.video == '' ? (
          <RNCamera
            ref={(ref) => {
              this.camera = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            androidCameraPermissionOptions={{
              title: 'Permission to use camera',
              message: 'We need your permission to use your camera',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            androidRecordAudioPermissionOptions={{
              title: 'Permission to use audio recording',
              message: 'We need your permission to use your audio',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            captureAudio={true}
          />
        ) : (
          <Video
            source={{uri: this.state.video}}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              alignItems: 'stretch',
              bottom: 0,
              right: 0,
              height: '90%',
            }}
            resizeMode="cover"
            repeat={true}
          />
        )}
      </View>
    );
  }
  video = () => {
    ImagePicker.openPicker({
      mediaType: 'video',
    }).then((video) => {
      this.setState({
        galleryVideo: 1,
        video: video.path,
        upload: true,
      });
    });
  };

  take30sVideo = async () => {
    if (this.camera) {
      try {
        const options = {
          quality: 2,
          videoBitrate: 8000000,
          maxDuration: 30,
        };
        const promise = this.camera.recordAsync(options);
        this.setState({progress: true});

        if (promise) {
          this.setState({recording: true});
          const data = await promise;
          this.setState({recording: false, upload: true});
          console.log(data);
          console.log('upload', this.state.upload);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
  take60sVideo = async () => {
    if (this.camera) {
      try {
        const options = {
          quality: 2,
          videoBitrate: 8000000,
          maxDuration: 60,
        };
        const promise = this.camera.recordAsync(options);

        if (promise) {
          this.setState({recording: true, upload: true});
          const data = await promise;
          this.setState({recording: false});
          console.log(data);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
  take15sVideo = async () => {
    if (this.camera) {
      try {
        const options = {
          quality: 2,
          videoBitrate: 8000000,
          maxDuration: 15,
        };
        const promise = this.camera.recordAsync(options);
        if (promise) {
          this.setState({recording: true});
          const data = await promise;
          this.setState({recording: false, upload: true});
          console.log(data);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    height: '90%',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    backgroundColor: '#e75480',
    borderRadius: 40,
    borderWidth: 3,
    borderColor: 'red',
    width: 60,
    height: 60,
    position: 'absolute',
    bottom: 0,
    justifyContent: 'center',
    left: '45%',
    alignContent: 'center',
  },
});

import React，{PureComponent}来自'React'；
从“react native”导入{样式表、文本、TouchableOpacity、视图、动画、ProgressBarAndroid}；
从“react native camera”导入{RNCamera}；
从“react native vector icons/Entypo”导入图标；
从“react native image crop picker”导入ImagePicker；
从“react native Video”导入视频；
让动画=新动画。值（0）；
导出默认类组件{
建造师（道具）{
超级（道具）；
此.state={
录音：错，
处理：对，
上传：false，
galleryVideo:“”，
进展：''，
视频：''，
};
}
render（）{
返回(
{this.state.upload==true&&(
this.props.navigation.navigate（'Post'，{key:1}）}>
下一个
)}
{this.state.upload==false&&(
上传
)}
60年代
15秒
{this.state.progress===true&&(
{/*  */}
)}
{this.state.video==''(
{
this.camera=ref；
}}
style={style.preview}
类型={RNCamera.Constants.type.back}
flashMode={RNCamera.Constants.flashMode.on}
androidCameraPermissionOptions={{
标题：“使用相机的权限”，
信息：“我们需要您的许可才能使用您的相机”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
androidRecordAudioPermissionOptions={{
标题：“使用录音的许可”，
消息：“我们需要您的许可才能使用您的音频”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
captureAudio={true}
/>
) : (
)}
);
}
视频=（）=>{
ImagePicker.openPicker({
mediaType:“视频”，
})。然后（（视频）=>{
这是我的国家({
画廊视频：1，
视频：video.path，
上传：对，
});
});
};
take30sVideo=async（）=>{
如果（这个相机）{
试一试{
常量选项={
质量:2,，
视频比特率：8000000，
最大持续时间：30，
};
const promise=this.camera.recordAsync（选项）；
this.setState（{progress:true}）；
如果（承诺）{
this.setState（{recording:true}）；
常数数据=等待承诺；
this.setState（{recording:false，upload:true}）；
控制台日志（数据）；
console.log（'upload'，this.state.upload）；
}
}捕获（错误）{
console.log（错误）；
}
}
};
take60sVideo=async（）=>{
如果（这个相机）{
试一试{
常量选项={
质量:2,，
视频比特率：8000000，
最大持续时间：60，
};
const promise=this.camera.recordAsync（选项）；
如果（承诺）{
this.setState（{recording:true，upload:true}）；
常数数据=等待承诺；
this.setState（{recording:false}）；
控制台日志（数据）；
}
}捕获（错误）{
console.log（错误）；
}
}
};
take15sVideo=async（）=>{
如果（这个相机）{
试一试{
常量选项={
质量:2,，
视频比特率：8000000，
最大持续时间：15，
};
const promise=this.camera.recordAsync（选项）；
如果（承诺）{
this.setState（{recording:true}）；
常数数据=等待承诺；
this.setState（{recording:false，upload:true}）；
控制台日志（数据）；
}
}捕获（错误）{
console.log（错误）；
}
}
};
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
背景颜色：“黑色”，
},
预览：{
身高：90%，
justifyContent:“柔性端”，
对齐项目：“居中”，
},
捕获：{
背景颜色：“#e75480”，
边界半径：40，
边框宽度：3，
边框颜色：“红色”，
宽度：60，
身高：60，
位置：'绝对'，
底部：0，
为内容辩护：“中心”，
左：45%，
对齐内容：“中心”，
},
});

比如说，我希望在录制开始后查看进度为true，take30svideo（）被触发，一旦为true，组件应设置动画以显示进度，然后在计时器完成后立即停止，以上是完整的代码，我希望这对您有所帮助

---

任何建议都很好

我假设您希望在安装应用程序时显示此布局30秒。您可以这样做：

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      progress: true,
    };
  }
  timer;

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setProgress();
    }, 30000);
  }

  setProgress = () => {
    this.setState({
      progress: false ,
    });
  };
  componentWillUnmount(){
  if(this.timer) clearInterval(this.timer);
 }

  render() { 
      if(this.state.progress){
       <View
            style={{
              borderColor: '#0000FF',
              borderWidth: 1,
              width: '100%',
              height: 15,
              top: 0,
              position: 'absolute',
              bottom: 0,
              zIndex: 2,
            }}>
            <Animated.View
              style={
                ([StyleSheet.absoluteFill],
                {backgroundColor: '#8BED4F', width: '50%', height: 10})
              }
            />
          </View>
      }
    else{
       ... rest of your code
     }
   }
    
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
进步：没错，
};
}
定时器；
componentDidMount（）{
this.timer=setInterval（（）=>{
这是setProgress（）；
}, 30000);
}
setProgress=（）=>{
这是我的国家({
进展：错，
});
};
组件将卸载（）{
if（this.timer）clearInterval（this.timer）；
}
render（）{
如果（本状态进度）{
}
否则{
…代码的其余部分
}
}
}

您需要将时间保存为实例变量，并在卸载组件时将其清除，否则即使在卸载组件后，它仍将继续运行，如下所示

componentDidMount() {
  this._interval = setInterval(() => {
    // Your code
  }, 1000);
}

componentWillUnmount() {
  clearInterval(this._interval);
}

---

你说的一个片段是什么意思？你想在一段时间后渲染那个元素，你想在一段时间后隐藏它，我们不知道。请更好地解释你想要的行为我想让视图闪烁一定的时间间隔，比如30000mW闪烁是什么意思？嗨@GBALDUZI我更新了问题，请看一下嗨@jpmarks我更新了que