ReactNative图片放大缩小查看笔记

来源：互联网发布：阿里云直播推流demo 编辑：程序博客网时间：2024/05/23 00:52

主要是害怕自己以后要用到忘了先记录下

基于第三方的插件写的 react-native-image-gallery 先附上地址:https://github.com/archriss/react-native-image-gallery

作者也没写什么demo 就自己试着写了写直接贴代码了有需要的话自己放在代码里跑一跑给个简单的效果图这里竟然不允许上传小视屏醉了支持放大缩小长按等时间

/** * Created by wangqiang on 2017/7/26. */import React from 'react';import {    View,    Text,    Image,    Animated,    Easing,    StyleSheet,    StatusBar,    TouchableOpacity,    Platform,    ImageBackground,    Dimensions,    ActivityIndicator} from 'react-native';const {width, height} = Dimensions.get('window');import Gallery from 'react-native-image-gallery';const images = [    {source: {uri: 'http://carpics.img-cn-shanghai.aliyuncs.com/2017-07-27/1501119379091pjwjix.jpg@!568_394'}},    {source: {uri: 'http://carpics.img-cn-shanghai.aliyuncs.com/2017-07-27/1501119134909gznrjz.jpg@!568_394'}},    {source: {uri: 'http://carpics.img-cn-shanghai.aliyuncs.com/2017-07-27/15011191973067e5qzp.jpg@!568_394'}},    {source: {uri: 'http://carpics.img-cn-shanghai.aliyuncs.com/2017-07-27/1501119078312c820kf.jpg@!568_394'}}];const context = [    {text: '赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员。2006年，因获得雅虎搜星比赛冯小刚组冠军而进入演艺圈；同年，在冯小刚执导的广告片《跪族篇》中担任女主角。2007年，参演个人首部电影《镖行天下之牡丹阁》。2011年，因在古装剧《新还珠格格》中饰演晴儿一角而被观众认识。2013年，凭借古装剧《陆贞传奇》获得更多关注。2014年10月，在第10届金鹰电视艺术节举办的投票活动中被选为“金鹰女神”；12月，凭借都市爱情剧《杉杉来了》获得第5届国剧盛典内地最具人气女演员奖；'},    {text: '赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员。'},    {text: '1987年10月16日，赵丽颖出生于河北廊坊市一个普通的农民家庭。从廊坊市电子信息工程学校空乘专业毕业后，由于家庭经济条件的限制，她放弃报考空姐的机会，而选择在一家公司做销售的工作'},    {text: '2006年5月，参加由雅虎网、浙江卫视、华谊兄弟联合主办的雅虎搜星比赛，并凭借个人表现以及投票网友的支持获得冯小刚组的冠军，从而正式进入演艺圈'},];export default class ImageDemo extends React.PureComponent {    // 构造    constructor(props) {        super(props);        // 初始状态        this.state = {            page: 0,            content:context        };    }    componentDidMount() {        StatusBar.setBarStyle('light-content')    }    render() {        const index = images.length;        const tx = this.state.content;        return (            <View style={styles.container}>                <View style={[styles.titleView]}>                    <Text style={styles.title}>{this.state.page+1}/{index}</Text>                </View>                <Gallery                    style={{flex: 1, backgroundColor: 'black'}}                    images={images}                    loader={                        <View style={styles.load}>                            <ActivityIndicator color='#fff' size='large'/>                        </View>                    }                    onSingleTapConfirmed={() => this.TopView()}                    onGalleryStateChanged={() => this.TopView()}                    // onLongPress={()=>alert('保存')}                    initialPage={this.state.initialPage} //索引                    pageMargin={20} //边距                    onPageSelected={(page) => {                        //alert(this.state.content[page].text);                        this.setState({                            page: page                        })                    }}                />                <View                    style={[styles.bottomView,]}>                    <Text style={styles.content}>                        {tx[this.state.page].text}                    </Text>                </View>            </View>        )    }}const styles = StyleSheet.create({    container: {        flex: 1    },    img: {        width: width,        height: height    },    titleView: {        width: width,        height: 55,        backgroundColor: 'rgba(96,96,96,0.3)',        justifyContent: 'center',        alignItems: 'center',        position: 'absolute',        top: 0,        left: 0,        zIndex: 1,    },    title: {        color: '#fff',        fontSize: 16,        marginTop: Platform.OS === 'ios' ? 10 : 10    },    bottomView: {        width: width,        backgroundColor: 'rgba(96,96,96,0.5)',        position: 'absolute',        bottom: 0,        padding: 10,    },    content: {        color: '#fff',        fontSize: 14    },    load: {        flex: 1,        justifyContent: 'center',        alignItems: 'center'    },});

最后来张简单的效果图

阅读全文

0 0