如何通过 MapView 区域更改更改 TouchableOpacity 颜色？

Question

Consider this code:

    import React, { useState, useEffect } from 'react'; 
    import { StyleSheet, Image, View, ScrollView, Text, FlatList, TouchableOpacity } from 'react-native';
    import MapView, { Marker } from 'react-native-maps';
    import {requestPermissionsAsync, getCurrentPositionAsync} from 'expo-location';
    import { TouchableHighlight, TextInput } from 'react-native-gesture-handler';
    import { MaterialIcons } from '@expo/vector-icons';

    import SearchBar from '../../components/searchInput';

    function Main(){
    const[currentRegion, setCurrentRegion ] = useState(null); 
        var color = 'red';
        function changeColor(){
            color = 'blue';
        };

        useEffect(()=>{
            async function loadInitialPosition() { 
                const { granted } = await requestPermissionsAsync(); 

                if(granted){
                    const { coords } = await getCurrentPositionAsync({ 
                        enableHighAccuracy: true, 
                    });

                    const { latitude, longitude } = coords; 
                    userCoords = coords;
                    setCurrentRegion({ 
                        latitude, 
                        longitude,
                        latitudeDelta: 0.01, 
                        longitudeDelta: 0.01,
                    })
                }
            }
        return ( 
        <>
            <MapView 
            ref = {(mapView) => { map = mapView; }}
            onRegionChange={()=>{
                changeColor()
            }}
            initialRegion={ currentRegion } 
            style={styles.map}
             customMapStyle={Mapstyle} 
             showsMyLocationButton={true} 
             showsUserLocation={true} 
             >
                 {satiros.localizarSatiros()}

            </MapView>
            <View style={styles.searchContainer}>
                <SearchBar/>
            </View>
            <View style={styles.extraMap}>
                <TouchableHighlight onPress={() => {}} style={styles.touchable}>
                    <MaterialIcons name="search" size={25} color="#9BAED4"  />
                </TouchableHighlight>
                <TouchableHighlight onPress={()=>{
                   mapboxModule.centralizarLocalizacao(map,userCoords.latitude,userCoords.longitude,60)
                }} style={styles.touchable2}>
                    <MaterialIcons name="my-location" size={25} color="#9BAED4"  />
                </TouchableHighlight>
            </View>
            <ScrollView pagingEnabled horizontal style={styles.scrollCards} showsHorizontalScrollIndicator={false}>
                {
                    images.map((item, index) => (
                        <TouchableOpacity 
                        activeOpacity={0.6} 
                        style={[styles.cardSlide,{backgroundColor:color}]}
                        >
                            <Image key={index} source={{ uri: item}}
                            style={styles.imagesCard}/>
                            <Text style={styles.cardTitle}>{MapSlide.card.nome}</Text>
                            <Text style={styles.cardSubTitle}>{MapSlide.card.desc}</Text>
                        </TouchableOpacity >
                    ))
                }
            </ScrollView>
        </>
        );
    }

    const styles = StyleSheet.create(styleJaja)

    export default Main;

I want to change backgroundColor value of TouchableOpacity when user moves the map. To detect if he's moving, I use 'onRegionChange', which calls the function 'changeColor', than changes 'color' variable to blue. So far so good. 'color' variable value really changes.

But that change doesn't affect the color of backgroundColor, only the variable. Any idea?

Answer 1

Maybe you could try to create a new useState to control and set color like:

const[color, setColor ] = useState('red');

and

changeColor(){ setColor ('blue'); };