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

Question

考虑这段代码：

    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;

我想在用户移动地图时更改 TouchableOpacity 的 backgroundColor 值。为了检测他是否在移动，我使用调用函数“changeColor”的“onRegionChange”，而不是将“颜色”变量更改为蓝色。到目前为止，一切都很好。'color' 变量值确实发生了变化。

但是这种变化不会影响 backgroundColor 的颜色，只会影响变量。任何想法？

标签： javascriptreact-nativeexpo

Answer 1

也许您可以尝试创建一个新useState的来控制和设置颜色，例如：

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

和

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