javascript - 使用 React-Native 在 ScrollView 中的特定位置进行缩放

标签 javascript ios react-native

基本上我正在尝试构建一个太阳系模拟,我已经创建了所有轨道动画等,并且我已经在 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>
)

}

出于某种原因, ScrollView 聚焦于最后一个元素,在本例中是太阳 <Planet/>当使用捏合手势放大和缩小时,它仅与该元素相关,因此无法放大到其他元素 <Planet/>元素。

我几天来一直在寻找解决方案,我想出的一个解决方案可能是当我点击它时使 ScrollView 聚焦在不同的元素上,但我尝试的任何方法都不起作用。提前致谢。

最佳答案

关于javascript - 使用 React-Native 在 ScrollView 中的特定位置进行缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57744510/

相关文章:

php - Facebook 登录困惑

javascript - ExtJS 5 : Set child View Model data from bound value

javascript - 清除html5表单错误

ios - 在 ARC 中释放强引用

iphone - UIView 动画在主线程上被阻止

react-native - redux 状态更新缓慢

javascript - Service Worker 从缓存中获取请求,因此页面不会从新数据中更新

ios - 无法接收 remoteControlReceivedWithEvent - objective-c - ios

react-native - FlatEnd问题中的onEndReached

php - 如何将图像从React Native上传到MySQL数据库?