javascript - 如何让 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);。

有了这些值，您可以设置 Animated缩放值，从 1 开始到 zoom 结束，就像在您的 componentWillMount 中这样:

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

构造函数看起来像这样:

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

渲染函数看起来像这样(可以找到转换引用 here ):

<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>