Javascript 使用React Native在ScrollView中的特定点缩放的俯仰

Javascript 使用React Native在ScrollView中的特定点缩放的俯仰,javascript,ios,react-native,Javascript,Ios,React Native,基本上,我正在尝试建立一个太阳系模拟,我已经创建了所有的轨道动画等。我已经在滚动视图中添加了组件,如下所示: 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

基本上,我正在尝试建立一个太阳系模拟,我已经创建了所有的轨道动画等。我已经在
滚动视图中添加了组件,如下所示:

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>
)
render(){
常数xCoord=20//太阳的初始x和y坐标
常数yCoord=150
const earthSize=35//地球大小用作行星大小的参考
const sunSize=地球大小*25//太阳大小用作调整行星轨道坐标的变量
const orbitDefault=sunSize
返回(
)
}

出于某种原因,滚动视图聚焦于最后一个元素,在本例中是太阳
,当使用收缩手势进行放大和缩小时,滚动视图仅针对该元素进行放大,从而无法放大到其他
元素

我已经寻找了好几天的解决方案,我想到的一个方法是,当我点击滚动视图时,它可能会聚焦在不同的元素上,但无论我尝试了什么,都没有成功。提前感谢。

尝试使用

试用