React Native 点击图片放大，缩放功能，组件封装

• create by CWP
• @ScrolImage 图片浏览显示组件封装，仅限iOS可以缩放，不支持安卓
  *先看效果

QQ20170704-173744.gif

*直接代码显示
【1】使用案例 图片暂时用的本地，可换成uri形势，相应代码自己改一下

const imgSource = require('./tabbar/panresponder-target.png');
//在render()中引入以下代码
 <ScrollImg
                    showModal = {this.state.showModal}
                    cancelAction ={()=>this.setState({showModal:false})}
                    imgSource={imgSource}
    />

【2】完整代码

 render() {
        const {imgSource,showModal,cancelAction} = this.props;
        return (

            <Modal
                animationType={'fade'} //fade slide  none
                visible={showModal}
                transparent={true}
            >
            <ScrollView
                style={styles.scorllStyle}
                maximumZoomScale={3}
                minimumZoomScale={0.8}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                centerContent={true} //子组件一直处于父组件中心位置，不会因为缩放而向其他方向偏离
                ref={(r)=>this.scroll = r}

            >
                <TouchableOpacity
                    activeOpacity={1.0}
                    onPress={()=>cancelAction()}
                >
                    <Image
                        source={(imgSource || defaultImg)}
                        resizeMode={'contain'}
                        style={styles.imgageStyle}
                    />
                </TouchableOpacity>
            </ScrollView>
            </Modal>
        );
    }

以上就是完整代码，安卓要实现此功能，需要使用panResponder来封装组件