导航到包含本机数据的另一个页面

Question

我正在使用 react-native 和 react-navigation v5。我想在函数执行后导航到另一个页面。
我正在使用反应本机相机。拍完照片后，我希望应用程序使用图像数据导航到另一个页面。有什么办法吗

import React, { PureComponent } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

const PendingView = () => (
  <View
    style={{
      flex: 1,
      backgroundColor: 'lightgreen',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    <Text>Waiting</Text>
  </View>
);

class CameraComponent extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          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',
          }}
        >
          {({ camera, status, recordAudioPermissionStatus }) => {
            if (status !== 'READY') return <PendingView />;
            return (
              <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                <TouchableOpacity onPress={() => this.takePicture(camera)} style={styles.capture}>
                  <Text style={{ fontSize: 14 }}> SNAP </Text>
                </TouchableOpacity>
              </View>
            );
          }}
        </RNCamera>
      </View>
    );
  }

  takePicture = async function(camera) {
    const options = { quality: 0.5, base64: true };
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
  };
}

export default CameraComponent

Answer 1

如果 CameraComponent 是您的导航屏幕之一，那么您应该将其作为普通组件，因为它将接收一个 navigation 参数，您将在导航中使用它，如下所示：

class CameraComponent extends Component({navigation}) {
...
  takePicture = async function(camera) {
    const options = { quality: 0.5, base64: true };
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
    navigation.navigate('any-other-page', {
      imgData: data
    });
  };
}

可以在 react-navigation
的 Moving between screens 文档中找到更多信息有关传递数据和获取数据的信息可以在 Passing parameters to routes 文档

中找到

有些情况下 CameraComponent 不会成为导航屏幕的一部分，而是 child/nested child 的一部分。
对此有三种不同的解决方案：

如果CameraComponent是直接child的导航画面
然后你只需将 navigation 属性传递给 child，就像这样：

class ParentScreen extends Component({navigation}) {
...
  <CameraComponent navigation={navigation} />
}

然后像上面那样使用 navigation 道具。

如果CameraComponent是深度嵌套child的导航画面
这在这里很难解释，但简而言之，如果您想将 React 组件保留为 class 组件

，您将使用 react context 来执行此操作

如果CameraComponent是深度嵌套child的导航画面
您可以将反应组件更改为功能组件，然后使用更简单的方法：useNavigation Hook 像这样：

function CameraComponent () {
  const navigation = useNavigation();
...
  takePicture = async function(camera) {
    const options = { quality: 0.5, base64: true };
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
    navigation.navigate('any-other-page', {
      imgData: data
    });
  };
}```

导航到包含本机数据的另一个页面

navigate to another page with data in react native

react-native

routes

react-props

react-navigation-v5

react-native-camera