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值，从zoom开始，结束时为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>

渲染函数看起来像这样（变换的参考可以找到here）：

// Compute integer powers of 2.
class Power {
  public static void main(String args[]) {
    int e;
    int result;

    for (int i = 0; i < 10; i++) {
      result = 1;
      e = i;

      while(e > 0) {
        result *= 2;
        e--;          // What is supposed to be decrementing and how???
      }

      System.out.println("2 to the " + i + 
                    " power is " + result);
    }
  }
}

Answer 2

我找到了一种以编程方式控制缩放的方法。假设您要在安装scrollview时设置默认的缩放级别。您可以将ScrollView的滚动响应器的方法scrollResponderZoomTo与超时一起使用。

setScrollViewRef = (ref) => {
  this.mapScrollView = ref;
  setTimeout(() => {
    this.mapScrollView._scrollResponder.scrollResponderZoomTo({
      height: this.mapSize, width: this.mapSize, animated: false,
    });
  }, 1);
};

并使用contentContainerStyle约束所需的大小来呈现滚动视图。

renderMapView = () => {
  this.mapSize = Dimensions.get('window').width * 2;
  return (
    <ScrollView
      style={{ flex: 1 }}
      ref={this.setScrollViewRef}
      maximumZoomScale={4}
      minimumZoomScale={0.5}
      contentContainerStyle={{ width: this.mapSize, height: this.mapSize }}
      centerContent
    >
      <Map width={this.mapSize} height={this.mapSize} />
    </ScrollView>
  );
};

这会将默认缩放级别设置为50％，并使整个<Map />可见。如果需要另一个缩放级别，可以为scrollResponderZoomTo提供不同的高度/宽度。仅适用于iOS。

Answer 3

@Levalis's answer保存我的一天。

根据这个问题，{p> scrollResponderZoomTo是当前React Native上最好的镜头#2176

如果有人遇到“缩小得太远且偏离中心”的问题，请尝试使用与您设置的样式相同的矩形调用scrollResponderZoomTo：

// declare image size in styles.js...
image: {
  width: <image width>,
  height: <image height>
}

// ...and inside your component
this.scrollView._scrollResponder.scrollResponderZoomTo({
  height: <image height>, width: <image width>, animated: false,
})

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

3 个答案: