ReferenceError: Can't find variable: navigation in react native

Question

我已经创建了 rncamera 来捕捉照片并保存它们，我在相机屏幕上有一个图标，可以将我带到画廊页面，但是在安装反应导航依赖项之后，我尝试导航但它一直给我错误“ReferenceError：找不到变量：在本机反应中导航”。我错过了什么...

 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;

Answer 1

因为您有渲染功能，所以您使用的是基于 class 的组件 使用

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