主要是害怕自己以後要用到忘了 先記錄下

基於第三方的外掛寫的   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'
    },
});