React native React native maps标记卡动画弹出窗口

我正在学习React native的动画。我的应用程序使用了谷歌地图。我创造了假数据。我使用

React原生地图的

显示数据的纬度和经度。在标记中，我使用了

React-native映射

，它接受React-native的jsx元素。我使用了动画，但似乎动画不起作用。这是详图索引。我想弹出动画卡

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
  }
});

import React，{ReactElement，useRef，useffect}来自'React'；
从“react native maps”导入MapView，{PROVIDER_GOOGLE，Marker，Callout}；
从“react native”导入{样式表、文本、视图、TouchableOpacity、图像、动画、状态栏、按钮}；
从“../../../data/data.json”导入数据//我的假数据
从“../../../maps skin/mapStripe”导入{stripeMap}；
界面道具{
}
常量初始区域={
“纬度”：60.1098678，
“经度”：24.7385084，
“latitudeDelta”：0.2，
“longitudeDelta”：1
};
导出默认函数索引（{navigation}:Props）：ReactElement{
控制台日志（导航）；
const fadeAnim=useRef（新的动画.Value（0））.current；//不透明度的初始值：0
useffect（（）=>{
时间(
法迪尼姆，
{
“toValue”：1，
“持续时间”：4000，
“useNativeDriver”：正确
}
).start（）；
}，[fadeAnim]）；
返回(
{/*  */}
{
数据？数据？地图（（i，索引）=>{
返回
{
navigation.navigate（`Detail`{
“itemId”：“${i.id}`
});
}}>
{i.餐厅}
点击
;
})
}
);
}
const styles=StyleSheet.create({
“容器”：{
“弹性”：1，
“背景色”：“fff”，
“对齐项目”：“居中”，
“为内容辩护”：“中心”`
},
“地图样式”：{
“宽度”：390，
“高度”：390
}
});