使用本机反应中的数据导航到另一个页面

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

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

---

在某些情况下，CameraComponent 不会成为导航屏幕的一部分，而是它的子/嵌套子项。
对此有三种不同的解决方案：强>

如果CameraComponent 是导航屏幕的直接子级
然后您只需将 navigation 属性传递给孩子，如下所示：

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

然后像我们上面那样使用navigation 属性。

如果CameraComponent 是导航屏幕的深层嵌套子项
这在这里很难解释，但简而言之，如果您想将 React 组件保留为类组件，您将使用 react context 来执行此操作

如果CameraComponent 是导航屏幕的深层嵌套子项
您可以将您的反应组件更改为功能组件，然后使用更简单的方法：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
    });
  };
}```