如何在本机反应中从相机按钮切换到视频录制按钮

Posted 2023-03-11

【中文标题】如何在本机反应中从相机按钮切换到视频录制按钮

【英文标题】：How to switch from camera button to video record button in react native

【发布时间】：2020-06-30 13:43:57

【问题描述】：

我在同一个容器上有相机捕捉按钮和视频录制按钮，我希望在启动应用程序时能够拥有相机按钮，然后当我点击文本“视频”时，它将切换到视频按钮进行录制.我有一个 beautyplus 应用程序的屏幕截图作为我的意思的示例 Camera button navigation

return (
                    <View style=styles.action>
                         <View style= flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, marginBottom: 15, alignItems: 'flex-end' >
                            <TouchableOpacity  onPress=this.toggleTorch.bind(this)>
                                     this.state.flashon == RNCamera.Constants.FlashMode.off? (
                                            <Icon
                                                name="md-flash-off"
                                                color="black"
                                                size=30 
                                            />
                                        ) : (
                                            <Icon
                                                name="md-flash"
                                                color="black"
                                                size=30 
                                            />
                                        )
                                    
                                </TouchableOpacity>
                                <View style= alignItems: 'center' >
                                    <TouchableOpacity onPress=this.takePicture style=styles.captureBtn />
                                </View>
                                <View style= alignItems: 'center' >
                                    <TouchableOpacity onPress=this.recordVideo style=styles.captureVideoBtn>
                                      
                                        this.state.recording ?
                                      (<Text>this.secondsToMMSS(this.state.seconds)</Text>) :
                                      (null)
                                      
                                    </TouchableOpacity>
                                </View>

                                <TouchableOpacity
                                  onPress=this.reverseCamera
                                  >
                                      <Icon
                                        name="md-reverse-camera"
                                        color="black"
                                        size=30 
                                      />

                                  </TouchableOpacity>

                          </View>
                    </View>
                  )
                
              
          </RNCamera>
         


          
      </View>
    );
  ;

【参考方案1】：

条件检查有什么问题？

constructor() 
   ...
   this.state = capture:'photo'; // default to photo


captureVideo=()=> ...
capturePhoto=()=> ...
captureAudio=()=>...

capture() 
  swicth (this.state.capture)
    case 'audio' : captureAudio()
    ...



render () 
 

...

  <TouchableOpacity onPress=()=>this.setState(capture:'video')> 
  <Text>Video</Text></TouchableOpacity>

  <TouchableOpacity onPress=()=>this.startCapture()><Text>Start</Text> 
  </TouchableOpacity>

  <TouchableOpacity onPress=()=>this.setState(capture:'photo')> 
  <Text>Video</Text></TouchableOpacity>

...

【讨论】：

嗨@cybercoder，请感谢您的回答，我仍然不清楚您的回答试图用我的代码实现它......它看起来与我的原始代码完全不同。请你让我更清楚...谢谢。