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

Question

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

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

标签： react-nativereact-native-androidreact-native-navigationreact-native-camera

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

...
}