[英]Pitch to zoom at specific spot in ScrollView with React-Native
Basically I am trying to build a solar system simulation, I have created all of the orbit animations etc. and I've added the components inside a ScrollView
as shown below: 基本上,我试图建立一个太阳系模拟,创建了所有的轨道动画等,并且在
ScrollView
添加了组件,如下所示:
render() {
const xCoord = 20 // sun's initial x and y coordinates
const yCoord = 150
const earthSize = 35 //earth size used as reference for planet sizes
const sunSize = earthSize * 25 //sun's size used as variable to adjust orbital coordinate of planets
const orbitDefault = sunSize
return (
<Animated.View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' }}>
<Image style={{ height: 850, width: 850, position: 'absolute', top: 0, left: 0 }} source={require('../public/astronomy.jpg')} />
<ScrollView
bouncesZoom={true}
contentContainerStyle={styles.container}
minimumZoomScale={'0'}
maximumZoomScale={'100'}
centerContent={true}>
<Planet x={xCoord} y={yCoord + (sunSize / 2)} height={earthSize} width={earthSize} orbitSize={orbitDefault * 6} orbitSpeedInDays={365} planetPicture={require('../public/earth.png')} name={'Earth'} />
<Planet x={xCoord} y={yCoord + (sunSize / 2)} height={earthSize * 0.95} width={earthSize * 0.95} orbitSize={orbitDefault * 4} orbitSpeedInDays={225} planetPicture={require('../public/venus.png')} name={'Venus'} />
<Planet x={xCoord} y={yCoord + (sunSize / 2)} height={earthSize * 0.38} width={earthSize * 0.38} orbitSize={orbitDefault * 2} orbitSpeedInDays={88} planetPicture={require('../public/mercury.png')} name={'Mercury'} />
<Planet x={xCoord} y={yCoord} height={sunSize} width={sunSize} orbitSize={0} orbitSpeedInDays={365} planetPicture={require('../public/sun_pic.png')} name={'Sun'} />
</ScrollView>
</Animated.View>
)
} }
For some reason the scroll view focuses on the last element which in this case is the sun <Planet/>
and it when is use pinch gesture to zoom in and out it only does it in relation to that element making it impossible to zoom in to other <Planet/>
elements. 出于某种原因,滚动视图将焦点放在最后一个元素上,在这种情况下,该元素是sun
<Planet/>
,并且在使用捏合手势进行放大和缩小时,它仅相对于该元素执行操作,从而无法放大到其他<Planet/>
元素。
I've been looking for a solution for days, one that I came up with is maybe making the scroll view focus on a different element when I tap it, but whatever I tried did not work. 我一直在寻找解决方案好几天了,我想出了一个解决方案,当我点击它时,可能会使滚动视图聚焦于另一个元素,但是我尝试的任何方法都不起作用。 Thanks in advance.
提前致谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.