图片操作库，react-native-image-zoom-viewer 使用方法

最近遇到一个需求，需要让用户预览图片，并且能进行放大缩小的操作。

google了一圈，最后使用了react-native-image-zoom-viewer。

官网Demo：

import { Modal } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [{
    // Simplest usage.
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

    // width: number
    // height: number
    // Optional, if you know the image size, you can set the optimization performance

    // You can pass props to <Image />.
    props: {
        // headers: ...
    }
}, {
    props: {
        // Or you can set source directory.
        url: '',
        source: require('../background.png')
    }
}]

export default class App extends React.Component {
    render: function() {
        return (
            <Modal visible={true} transparent={true}>
                <ImageViewer imageUrls={images}/>
            </Modal>
        )
    }
}

看着不难，但是照着官网的思路加在我的代码上时，图片居然加载不出来？？WTF？

我的代码：

import { View, ScrollView } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [
	{  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }，
	{  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }
]

export default class App extends React.Component {
    render: function() {
        return (
        	<ScrollView>
         		<View style={styles.ImageView}>
                	<ImageViewer imageUrls={images}/>
      		  	</View>
            </ScrollView>
        )
    }
}

折腾了半天，最后用终于弄懂了是为何。

原来就像官网的例子一样。

上图的ImageViewer，占了整个屏幕的大小，我把他当作一个可以手动加样式的组件，这样的后果就是组件大小不够，图片显示不出来。

所以以后要多注意这些小细节啊。

完。