Question

我正在尝试显示使用expo-camera捕获的图像，我正在尝试从相机组件导航到一个新文件，该文件将显示该图像，但是在我拍摄图像后，它将无法导航到新页面。

我尝试导入文件，然后进行导航，但是它仍然无法正常工作，而是给我警告。

这是我尝试导航到新文件的代码。

    export default class CameraExample extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
  };

  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  snap = async() => {
      if(this.camera) {
          console.log('Taking photo');
          const options = {quality: 1, base64: true, fixOrientation: true, exif: true};
          const photo = await this.camera.takePictureAsync(options);
          this.props.navigation.navigate("Show", {photouri: photo.uri})
      }
  }

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
          <Camera style={{ flex: 1 }} type={this.state.type}
            ref = {ref => {
                this.camera = ref;
            }}
          >
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}>

              <TouchableOpacity onPress={this.snap.bind(this)}>
                  <Ionicons
                    name = "md-camera"
                    color = "white"
                    size = {30}
                  />
              </TouchableOpacity>

              <TouchableOpacity
                style={{
                  flex: 0.1,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.setState({
                    type:
                      this.state.type === Camera.Constants.Type.back
                        ? Camera.Constants.Type.front
                        : Camera.Constants.Type.back,
                  });
                }}>
                <Ionicons
                    name = "md-reverse-camera"
                    color = "white"
                    size = {30}
                />
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );
    }
  }
}

这是我尝试显示图像的代码。

export default class ShowImages extends React.Component{
    render(){ 
       console.log('OK')
       const { navigation } = this.props;
       const paramm = navigation.getParam('photouri');
        return(
            <Content>
                <View>
                    <Text>
                        paramm: {JSON.stringify(paramm)}
                    </Text>
                    <Image style={{height: 700, width: 850, alignSelf: "center"}}
                    source={{uri: this.props.navigation.state.paramm.photouri}}
                    resizeMode="contain"/>
                </View>
            </Content>
        )
    }
}

我希望它可以导航到新页面并显示捕获的内容图片，但它给了我警告。我似乎找不到我的代码有什么问题。谁能建议我该怎么办？谢谢。

Answer 1

更改此

<TouchableOpacity onPress={this.snap.bind(this)}> =>  <TouchableOpacity onPress={this.snap}>

将其放入状态值并继续传递。

export default class ShowImages extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      paramm: this.props.navigation.state.params.photouri
    };
  }
...
                    <Image style={{height: 700, width: 850, alignSelf: "center"}}
                    source={{uri: this.state.paramm }}
                    resizeMode="contain"/>

可能的未处理的承诺拒绝（id：0）：TypeError：未定义不是对象（正在评估'_this.props.navigation.navigate'）

1 个答案: