0

我是 React Native 的新手，我正在开发一个视频应用程序来帮助我的学习曲线。在下面的代码中，我已尽我所能解决“displayModal”行上的错误，但无法解决。请任何人都可以帮我解决这个问题。我想在图像/视频捕获时将其显示在模态中，并且从模态中我将能够“丢弃”或“保存”（到 Firebase）或“共享”图像/视频。 

import React from 'react';
import { View, Text, Image, Modal, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

import styles from './styles';

export default ({captures=[]}) => {
   state = {
   isVisible: false
   }
 // hide show modal
  displayModal(show){  ------this is where am getting the error
   this.setState({isVisible: show})
}
 return (

  <Modal 
   transparent={true}
   visible={this.state.isVisible}
   // style={[styles.bottomToolbar, styles.galleryContainer]} 
>
 <View style={{backgroundColor: "#000000aa", flex: 1}}>
  {captures.map(({ uri }) => (
  <View style={styles.galleryImageContainer} key={uri}>
   <Image source={{ uri }} style={styles.galleryImage} />
  </View>
 ))}
 </View>
 <TouchableOpacity style={{justifyContent: 'center', alignItems: 'center'}}>
 <Ionicons
  name="close-outline"
  color="white"
  size={20}
  onPress={() => {this.displayModal(!this.state.isVisible);}}
  />
   <Text>Discard</Text>
   </TouchableOpacity>
   </Modal>

  );
};

点击这里查看错误图片

4

2 回答 2

1

从您的代码来看，它看起来像 a functional component，但您使用state的是 as class-based component，这可能是您收到错误的原因：

export default ({captures=[]}) => {
  state = {
    isVisible: false
  }
  // hide show modal
  displayModal(show){  ------this is where am getting the error
    this.setState({isVisible: show})
  }

上面的代码块应该是这样的：

export default ({captures=[]}) => {

  const [state,setState] = useState({ isVisible: false })

  // hide show modal
  const displayModal = (show) => { 
    setState({isVisible: show})
  }
于 2020-06-17T12:13:20.070 回答
0

您正在将功能组件与类组件混合。“this.state”和“this.setState”属于类组件，其余的都属于功能组件。

尝试改变这一点：

state = {
   isVisible: false
   }
 // hide show modal
  displayModal(show){  ------this is where am getting the error
   this.setState({isVisible: show})
}

对此：

const [isVisible, setIsVisible] = React.useState(false);

const displayModal = show => setIsVisible(show);

此外，在返回语句中，删除字符串/单词“this”和“this.state”。

要求添加：

import React, { useState } from 'react';
import { View, Text, Image, Button, Modal, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { storage } from './fbstorage';
import { Camera } from 'expo-camera';

import styles from './styles';

export default ({ captures = [] }) => {
    const [isVisible, setIsVisible] = useState(false);

    const takePicture = async () => {
        const photoData = await Camera.takePictureAsync();
        if (!photoData.cancelled) {
            uploadImage(photoData.uri, imageName)
                .then(() => {
                    Alert.alert("Success");
                })
                .catch((error) => {
                    Alert.alert('Error:', error.message);
                });
        }
    }

    const uploadImage = async (uri, imageName) => {
        const response = await fetch(uri);
        const blob = await response.blob();
        var ref = storage().ref().child("images/" + imageName);
        return ref.put(blob)
    }

    return (
        <Modal
            transparent={true}
            visible={isVisible}
        // style={[styles.bottomToolbar, styles.galleryContainer]} 
        >
            <View style={{ backgroundColor: "#000000aa", flex: 1 }}>
                {captures.map(({ uri }) => (
                    <View style={styles.galleryImageContainer} key={uri}>
                        <Image source={{ uri }} style={styles.galleryImage} />
                    </View>
                ))}
            </View>
            <TouchableOpacity
                style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: 20,
                    top: -20
                }}
                onPress={() => setIsVisible(false)}
            >
                <Ionicons
                    name="md-reverse-camera"
                    color="white"
                    size={40}
                />
                <Text style={{ color: 'white' }}>Discard</Text>
            </TouchableOpacity>
            <Button
                title='Save'
                onPress={takePicture}
            />
        </Modal>
    );
};
于 2020-06-17T12:20:00.913 回答