ReactNative图片放大缩小查看笔记

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

基于第三方的插件写的   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'
    },
});

最后来张简单的效果图