Реагируйте на родной модальный CallBack - передавая реквизиты родителю - PullRequest
Новая
       45

Реагируйте на родной модальный CallBack - передавая реквизиты родителю

0 голосов
/ 28 октября 2019

Я использую React Native Modal и испытываю трудности с передачей реквизита из Модала в класс, который назвал Модал.

Я пробовал с onRequestClose() и onPress() и установил реквизит для данных обратного вызова googlePlacesPassedBackLocation, но безуспешно. Я пытаюсь получить прошлые местоположения из GooglePlaces. Я вижу в GooglePlaces, что местоположение генерируется правильно. Я использую хук useState как в классе Modal, так и в классе GooglePlaces.

Я читал, что это трудно сделать, так как реакция на самом деле не поддерживает это. Это вообще возможно?

import {StyleSheet, View, Modal, TouchableOpacity, Text, TouchableHighlight, Button } from 'react-native';

Родительский компонент: 

const RegisterLocationScreen = ({navigation}) => {  
    var [pastLocations, setPastLocations] = useState([]);
    var [pastModalVisible, setModalPastVisible] = useState(false);

    const closeModal = (timeFrame) => {
        setModalPastVisible(false);
    };
    const openGooglePastModal = () => {
        setModalPastVisible(true)
    };

    return (
    <Modal visible={pastModalVisible} animationType={'slide'} onRequestClose={() => closeModal(pastLocations)}>
        <View style={styles.modalContainer}>
            <SafeAreaView style = {styles.safeAreaViewStyle} forceInset={{top: 'always'}}>
                 <GooglePlaces timePeriod="Past" googlePlacesPassedBackLocation={googlePlacesPassedBackLocation} />
                 <TouchableOpacity style = {styles.buttonContainer} onPress={()=> closeModal('Past')}> 
                        <Text style={styles.buttonText} >
                            Close Modal
                        </Text>
                 </TouchableOpacity>                        
            </SafeAreaView>
        </View>
    </Modal>
    <TouchableOpacity style = {styles.buttonModal} onPress={() => openGooglePastModal()} >
            <Text style={styles.buttonModalText} >
                Past Locations 
            </Text>
    </TouchableOpacity>

Дочерний компонент: 

import React, {useState} from 'react';
import {StyleSheet } from 'react-native'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const API_KEY = '123omittedforsecurity';

const GooglePlaces = ({timePeriod}) => { 
    var [pastLocations, setPastLocations] = useState([]);

    const updateLocationArray = (data, details) =>{
        setPastLocations([
            ...pastLocations,
            details.geometry.location
          ]);        
    };

    return (
    <GooglePlacesAutocomplete
        placeholder={timePeriod}
        onPress={(data, details) => { 
            updateLocationArray(data, details);
        }}
        ..../>
...