反应本机地图标记卡动画弹出窗口

问题描述

我正在学习React native的动画。我已经为我的应用程序使用了谷歌地图。我创建了虚假数据。我使用React-native-map's Marker显示数据的纬度和经度。在标记内部，我使用了React-native-map's Callout来接受react native的jsx元素。在输出中，我使用了动画，但似乎动画不起作用。这是标注的looks like。我要弹出动画卡200ms。我不知道如何在标记内使用动画。

这是我的地图的组成部分

import React,{ ReactElement,useRef,useEffect } from 'react';
import MapView,{ PROVIDER_GOOGLE,Marker,Callout } from 'react-native-maps';
import { StyleSheet,Text,View,TouchableOpacity,Image,Animated,StatusBar,Button } from 'react-native';
import datas from '../../../data/data.json'; //My Fake data
import { stripeMap } from '../../../maps-skin/mapStripe';

interface Props {

}

const intialRegion = {
  "latitude": 60.1098678,"longitude": 24.7385084,"latitudeDelta": 0.2,"longitudeDelta": 1
};

export default function index({ navigation }: Props): ReactElement {
  console.log(navigation);

  const fadeAnim = useRef(new Animated.Value(0)).current;  // Initial value for opacity: 0

  useEffect(() => {
    Animated.timing(
      fadeAnim,{
        "tovalue": 1,"duration": 4000,"useNativeDriver": true
      }
    ).start();
  },[fadeAnim]);
  return (
    <View style={styles.container}>
      {/* <StatusBar hidden={true} /> */}
      <MapView.Animated
        provider={PROVIDER_GOOGLE}
        initialRegion={intialRegion}
        showsIndoors={true}
        showsMyLocationButton={true}
        zoomControlEnabled={true}
        zoomEnabled={true}
        zoomTapEnabled={true}
        showsScale={true}
        // showsTraffic={true}
        showsBuildings={true}
        showsUserLocation={true}
        showsCompass={true}
        showsIndoorLevelPicker={true}
        showsPointsOfInterest={true}
        loadingEnabled={true}
        customMapStyle={stripeMap}
        style={styles.mapStyle} >
        {
          datas?.data?.map((i,index) => {
            return <Marker
              key={index}
              coordinate={{ "latitude": i.location.lat,"longitude": i.location.lng }}
              image={{ "uri": `image.jpg` }}
              animation={true}
            >

              <Callout
                style={{ "width": 250,"height": 50 }}
                onPress={() => {
                  navigation.navigate(`Detail`,{
                    "itemId": `${i.id}`
                  });
                }}>
                <Animated.View //This  is my animated View which does not work
                  style={{
                    "opacity": fadeAnim
                  }}
                >
                  <Text>{i.restaurant}</Text>
                  <Text>click</Text>
                </Animated.View>
              </Callout>

            </Marker>;
          })
        }
      </MapView.Animated>
    </View>
  );
}

const styles = StyleSheet.create({
  "container": {
    "flex": 1,"backgroundColor": `#fff`,"alignItems": `center`,"justifyContent": `center`

  },"mapStyle": {
    "width": 390,"height": 390
  }
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）