ReferenceError:找不到变量:在React Native中导航

时间:2020-07-04 05:15:58

标签: javascript react-native react-native-android react-native-navigation

我已经创建了rncamera来捕获图片并将其保存,我在相机屏幕上有一个图标,应该可以带我到图库页面,但是在安装了React导航依赖项后,我尝试进行导航,但是它始终提示我错误“ ReferenceError:可以” t找到变量:“在本机中导航”。我想念的是什么...

 navigatePhotoGallery = () => {
      navigation = useNavigation();
    }

  render() {
    return (
      <View style={styles.container}>
          <RNCamera
            ref = {ref=>{
                this.camera=ref;
            }}
            style={styles.preview}
            flashMode={this.state.flashon}
            type={this.state.backCamera ? RNCamera.Constants.Type.back : RNCamera.Constants.Type.front} 
            captureAudio={this.state.captureAudio}
            androidCameraPermissionOptions={{
              title: 'Vocajam needs ermission to use camera',
              message: 'We need your permission to use your camera',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
          >
              {
                ({ camera, status, androidRecordAudioPermissionOptions }) => {
                  if (status !== 'READY') return <PendingView />

                  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>

          <TouchableOpacity 
            style={styles.photoGalleryIcon}
            onPress={() => this.navigatePhotoGallery(navigation.navigate('PhotoGallery'))}
          >
                <Image 
                  source={require('../images/photoGalleryIcon.png')}
                />
            </TouchableOpacity>
         


          
      </View>
    );
  };
}
export default cameraComponent;

1 个答案:

答案 0 :(得分:0)

由于具有渲染功能,因此您正在使用基于类的组件 使用

this.props.navigation.navigate('PhotoGallery')