javascript - 使用 React-Native 在 ScrollView 中的特定位置缩放
问题描述
基本上我正在尝试建立一个太阳系模拟,我已经创建了所有的轨道动画等,并且我已经在 a 中添加了组件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>
)
}
由于某种原因,滚动视图专注于最后一个元素,在这种情况下是太阳<Planet/>
,当使用捏合手势放大和缩小时,它仅与该元素相关,因此无法放大其他<Planet/>
元素。
几天来我一直在寻找一个解决方案,我想出的一个可能是当我点击它时让滚动视图聚焦在不同的元素上,但无论我尝试什么都没有用。提前致谢。
解决方案
尝试使用
推荐阅读
- css - Bootstrap 4 Card Header 和 Form-Control 进入新行
- javascript - Push Data with API REST in Algolia
- sockets - 作业分布式执行 - Java Springboot
- react-native - 使用 react-hook-form 反应原生形式
- ssrs-2008 - 如何使用表达式设置 SSRS tablix 单元格边框颜色?
- python - 如何将抓取的数据导出到 csv - selenium
- javascript - 如何使用 javascript 将 cookie 设置为变量?
- scala - Scala - Map[Class[T], Seq[T]] - 键和值中的泛型
- node.js - 如果通过正在测试的类调用 Jest 模拟类依赖项返回未定义
- python-3.x - 为什么这个问题发生在我的 linux mint 上的 pgadmin4 上