Неожиданный токен, ожидаемый ";" в ответ родной - PullRequest
Новая
       5

Неожиданный токен, ожидаемый ";" в ответ родной

0 голосов
/ 17 июня 2020

Я новичок ie в 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>

  );
};

щелкните здесь, чтобы увидеть изображение ошибки

Ответы [ 2 ]

1 голос
/ 17 июня 2020

Из вашего кода это выглядит как functional component, но вы используете state как 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})
  }
0 голосов
/ 17 июня 2020

Вы смешиваете функциональный компонент с компонентом класса. "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);

Кроме того, в операторе return удалите строки / слова «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>
    );
};
...