首页 > 代码库 > React Native ScrollView缩放
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)
}
}
React Native ScrollView缩放
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。