- create by CWP
- @ScrolImage 圖片瀏覽顯示組件封裝腻惠，僅限iOS可以縮放，不支持安卓
*先看效果
QQ20170704-173744.gif
*直接代碼顯示
【1】使用案例 圖片暫時(shí)用的本地欲虚，可換成uri形勢(shì)，相應(yīng)代碼自己改一下
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} //子組件一直處于父組件中心位置悔雹，不會(huì)因?yàn)榭s放而向其他方向偏離
ref={(r)=>this.scroll = r}
>
<TouchableOpacity
activeOpacity={1.0}
onPress={()=>cancelAction()}
>
<Image
source={(imgSource || defaultImg)}
resizeMode={'contain'}
style={styles.imgageStyle}
/>
</TouchableOpacity>
</ScrollView>
</Modal>
);
}
以上就是完整代碼复哆，安卓要實(shí)現(xiàn)此功能欣喧，需要使用panResponder來(lái)封裝組件
