如何使用地图视图区域更改更改可触摸不透明度颜色?

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;

我想在用户移动地图时更改可触摸不透明度的背景颜色值。 为了检测他是否在移动，我使用"onRegionChange"，它调用函数"changeColor"，而不是将"color"变量更改为蓝色。目前为止，一切都好。"颜色"变量值确实会发生变化。

但这种变化不会影响 backgroundColor 的颜色，只会影响变量。 知道吗？

Answer 1

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

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

和

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