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值。为了检测他是否在移动，我使用了“ onRegionChange”（调用函数“ changeColor”），然后将“ color”变量更改为蓝色。到现在为止还挺好。 “颜色”变量值确实发生了变化。

但是该更改不会影响backgroundColor的颜色，只会影响变量。有想法吗？

Answer 1

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

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

和

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

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

1 个答案: