zoukankan      html  css  js  c++  java
  • React Native ScrollView缩放

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

    }

    }

        

    
    
  • 相关阅读:
    [ Luogu 3398 ] 仓鼠找sugar
    [ JLOI 2014 ] 松鼠的新家
    AtcoderGrandContest 005 F. Many Easy Problems
    Codeforces 388 D. Fox and Perfect Sets
    Codeforces 1037 H. Security
    「学习笔记」wqs二分/dp凸优化
    「NOI2017」游戏
    「SCOI2014」方伯伯的商场之旅
    「SCOI2015」情报传递
    「SCOI2016」美味
  • 原文地址:https://www.cnblogs.com/madaha/p/5931990.html
Copyright © 2011-2022 走看看