react-native - 为什么我的反应原生视图中 MapView.Marker 的动画不起作用?
问题描述
我使用 MapView.Marker 创建了一个地图视图和一些标记。我正在使用滚动视图在标记之间切换。开关工作正常,使当前标记居中。
当用户切换到当前标记时,我还创建了一些动画。我为此使用了插值(不透明度和比例)。但是动画不起作用。我现在正在Android上进行测试。这是我的代码:
const interpolations = this.state.markers.map((marker, index) => {
const inputRange = [
(index - 1) * CARD_WIDTH,
index * CARD_WIDTH,
((index + 1) * CARD_WIDTH),
];
const scale = this.animation.interpolate({
inputRange,
outputRange: [1, 2.5, 1],
extrapolate: "clamp",
});
const opacity = this.animation.interpolate({
inputRange,
outputRange: [0.35, 1, 0.35],
extrapolate: "clamp",
});
return { scale, opacity };
});
return (
<View style={styles.container}>
<MapView
ref={map => this.map = map}
initialRegion={this.state.region}
style={styles.container}
>
{this.state.markers.map((marker, index) => {
const scaleStyle = {
transform: [
{
scale: interpolations[index].scale,
},
],
};
const opacityStyle = {
opacity: interpolations[index].opacity,
};
return (
<MapView.Marker key={index} coordinate= {{latitude: marker.location.coordinates[0], longitude: marker.location.coordinates[1]}}>
<Animated.View style={[styles.markerWrap,opacityStyle]}>
<Animated.View style={[styles.ring, scaleStyle]} />
<View style={styles.marker} />
</Animated.View>
</MapView.Marker>
);
})}
</MapView>
markerWrap: {
alignItems: "center",
justifyContent: "center",
borderRadius: 17,
borderWidth: 2,
overflow: "hidden",
width: 24,
height: 24,
borderColor: "rgba(130,4,150, 0.5)",
backgroundColor: "rgba(130,4,150, 0.3)",
position: "absolute",
},
marker: {
borderRadius: 4,
borderWidth: 1,
width: 8,
height: 8,
backgroundColor: "rgba(130,4,150, 0.9)"
},
ring: {
width: 24,
height: 24,
},
请告知您的建议。
谢谢
解决方案
这是一个已知问题。3年前在官方文档中添加了以下内容-
问题:由于 android 需要将其标记视图呈现为位图,动画 API 可能与标记视图不兼容。不确定这是否可以解决。
你可以在这里找到它 - https://github.com/react-native-community/react-native-maps,在“使用带有动画 API 的 MapView”部分下。
推荐阅读
- ios - 当 NavigationBar 为大标题时不应用 barTintColor
- html - 垂直显示图标 HTML
- data-mining - 如何从 ISO 文件中提取程序代码
- flutter - 如何根据输入的 TextField 值显示 MySQL 查询结果
- java - 发现两个属性区分大小写冲突的 getter 或字段:uid
- jquery - 如何使用来自不同 if 语句的布尔值并使用它们来更改代码
- reactjs - 解决 ReactJS+Redux this.props.action 不是函数
- javascript - 尝试在 react 中使用 react final 形式将星号表示为必需
- ruby-on-rails - Rails 迁移运行没有错误,但不创建 tsvector 列、GIN 索引或 TRIGGER
- swift - 如何使用 Combine 来判断 Core Data 对象何时更改