React Native ScrollView缩放

最新推荐文章于 2024-04-29 00:32:49 发布

weixin_30402085

最新推荐文章于 2024-04-29 00:32:49 发布

阅读量431

点赞数

原文链接：http://www.cnblogs.com/madaha/p/5931990.html

版权

本文介绍了一个使用 React Native 实现的图片缩放功能示例，通过 ScrollView 控件设置了图片的最大和最小缩放比例，并使图片始终保持在屏幕中心。此外，还展示了如何为图片添加 TouchableWithoutFeedback 以实现触摸反馈。

摘要由CSDN通过智能技术生成

"use strict"

import React, { Component } from 'react';
import {
    AppRegistry, // 注册组件,是应用的JS运行入口
    StyleSheet,  // 样式表, 类似于一个集合包含各个组件的属性
    ScrollView,
    Dimensions,  // 规格
    TouchableWithoutFeedback,
    Image,       // 图片组件
    View         // 视图组件
} from 'react-native';

const { width, height } = Dimensions.get('window')

// 声明一个 Helloworld 组件
class HelloWorld extends Component {

    render() { // 渲染

      return (

        <ScrollView contentContainerStyle={{flex: 1}} // 默认充满整个空间(屏幕)
                    maximumZoomScale={2}    // 子组件(图片)放大倍数
                    minimumZoomScale={1.0}  // 子组件(图片)缩小倍数
                    showsHorizontalScrollIndicator={true}
                    showsVerticalScrollIndicator={true}
                    centerContent={true} // 子组件(图片)一直处于父组件中心位置,不会因缩放向其他方向偏离
                    ref="testScroll"
        >
            <TouchableWithoutFeedback onPressOut={this.sigleTap()}>
                <Image source={require('./Resource/Test/ttttt.png')}
                       resizeMode={'contain'}
                       style={{flex: 1, width, height}} // 如果Image不设置width、height那么他就会按照自身的大小就行展示,导致超出屏幕边界
                />
            </TouchableWithoutFeedback>
        </ScrollView>
    );
  }

    sigleTap() { // 手势这个暂未搞明白
        var timestamp = new Date().getTime(); // 时间戳

        alert(timestamp)

    }

}