0

我正在学习 React Native 的动画。我为我的应用程序使用了谷歌地图。我创建了假数据。我使用React-native-map's Marker显示数据的纬度和经度。在标记内部，我使用了React-native-map's Callout，它采用了 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
  }
});
4

0 回答 0