如何让React Native的ScrollView初始缩放为1？

Question

我想将内容(垂直排列的多个图像)放在一个比手机屏幕大的React Native ScrollView(现在仅限iOS,Android将会更晚)中,然后开始缩小以便同时显示所有内容.

有没有在componentDidMount调用中使用ScrollView.scrollResponderZoomTo的任何好例子,该调用缩小以适应屏幕中的内容,类似于

<ScrollView
  style={{width: 500, height: 1000}}
  // + whatever other properties make this work required way
>
  <View style={{width: 2000, height: 5000}}>
    <Image style={{width: 2000, height: 2000}} source={.....}/>
    <Image style={{width: 2000, height: 3000}} source={.....}/>
  </View>
</ScrollView>

我尝试设置'zoomScale'属性,但似乎被忽略并始终使用值1.

根据这个问题(https://github.com/facebook/react-native/issues/2176),可以使用scrollResponderZoomTo函数,但是当我尝试使用它时,似乎无论我给出什么值它缩小得太远而且偏离中心.

F8示例应用程序有一个ZoomableImage模块(https://github.com/fbsamples/f8app/blob/b5df451259897d1838933f01ad4596784325c2ad/js/tabs/maps/ZoomableImage.js),该模块使用Image.resizeMode.contain样式使图像适合屏幕,但这会失去图像的质量,所以当你放大它会变得模糊.

Answer 1

这可能不是您想要的方式，但可能是一个解决方案：

您可以获得设备的高度和宽度（var {height, width} = Dimensions.get('window')）并且您知道您的图像尺寸，因此您可以轻松计算出所需的宽度和高度，我们称它们为var neededWidth, neededHeight;。然后，您可以计算您想要缩小的缩放比例：var zoom = Math.min(height / neededHeight, width / neededWidth);。

有了这些值，您就可以为缩放设置一个动画zoom值，从 1 开始，在您的 中像这样结束componentWillMount：

Animated.timing(
   this.state.animatedZoom,
   {toValue: zoom}
 ).start(); 

构造函数看起来像这样：

constructor(props) {
  super(props);
  this.state = {
    animatedZoom: new Animated.Value(1),
  };
}

渲染函数如下所示（可以在此处找到转换的参考）：

<ScrollView
  style={{width: 500, height: 1000, transform: [{ scale: this.state.animatedZoom }]}}
>
  <View style={{width: 2000, height: 5000}}>
    <Image style={{width: 2000, height: 2000}} source={.....}/>
    <Image style={{width: 2000, height: 3000}} source={.....}/>
  </View>
</ScrollView>