- 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来封装组件
