android - 反应本机应用程序图像渲染不起作用

Question

我正在开发一个应用程序来显示图像，我正在使用一个名为

反应原生图像缩放查看器

但我的代码没有显示图像。它总是一个空白屏幕。这是我的代码

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

            const images = [
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fcandypur.png?alt=media&token=601a2198-9aef-4d4f-9c70-49ec069d527f',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fcherry.png?alt=media&token=a5d1b6e9-5ad5-4a4b-a9b8-c963ffc4255a',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-611.png?alt=media&token=a12d81b4-b0d3-4907-94d7-3ea36cbc0faf',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-612.png?alt=media&token=71dcba62-6225-4687-930a-e608ae42db4c',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-615.png?alt=media&token=23e9c5dc-16f3-426e-b1ce-68c35fd145b2',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fgroupgre.png?alt=media&token=5a280580-8c4b-4aef-83c4-4626174b04fa',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Folivegreen.png?alt=media&token=dc72ce64-e794-4aab-a0a9-54f134d0d5dd',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Forange.png?alt=media&token=4631ff27-26d6-4d19-9370-40893d15af8f',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fteal.png?alt=media&token=7522aea2-02c4-4f13-9cb4-e7d43ce684e9',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fyellow.png?alt=media&token=6375fd68-fd93-40b8-a989-aef0e96e10ff'
            ]

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

标签： androidimagereact-nativeview

Answer 1

更改您的图像阵列以符合准则

const images = [
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fcandypur.png?alt=media&token=601a2198-9aef-4d4f-9c70-49ec069d527f'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fcherry.png?alt=media&token=a5d1b6e9-5ad5-4a4b-a9b8-c963ffc4255a'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-611.png?alt=media&token=a12d81b4-b0d3-4907-94d7-3ea36cbc0faf'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-612.png?alt=media&token=71dcba62-6225-4687-930a-e608ae42db4c'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-615.png?alt=media&token=23e9c5dc-16f3-426e-b1ce-68c35fd145b2'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fgroupgre.png?alt=media&token=5a280580-8c4b-4aef-83c4-4626174b04fa'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Folivegreen.png?alt=media&token=dc72ce64-e794-4aab-a0a9-54f134d0d5dd'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Forange.png?alt=media&token=4631ff27-26d6-4d19-9370-40893d15af8f'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fteal.png?alt=media&token=7522aea2-02c4-4f13-9cb4-e7d43ce684e9'},
              {url:'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fyellow.png?alt=media&token=6375fd68-fd93-40b8-a989-aef0e96e10ff}'
            ]

要按如下方式动态传递所需的数组使用，请使用 array.map 函数来创建您的数组。

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

            const images = [
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fcandypur.png?alt=media&token=601a2198-9aef-4d4f-9c70-49ec069d527f',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fcherry.png?alt=media&token=a5d1b6e9-5ad5-4a4b-a9b8-c963ffc4255a',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-611.png?alt=media&token=a12d81b4-b0d3-4907-94d7-3ea36cbc0faf',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-612.png?alt=media&token=71dcba62-6225-4687-930a-e608ae42db4c',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2FGroup-615.png?alt=media&token=23e9c5dc-16f3-426e-b1ce-68c35fd145b2',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fgroupgre.png?alt=media&token=5a280580-8c4b-4aef-83c4-4626174b04fa',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Folivegreen.png?alt=media&token=dc72ce64-e794-4aab-a0a9-54f134d0d5dd',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Forange.png?alt=media&token=4631ff27-26d6-4d19-9370-40893d15af8f',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fteal.png?alt=media&token=7522aea2-02c4-4f13-9cb4-e7d43ce684e9',
              'https://firebasestorage.googleapis.com/v0/b/taam-623b6.appspot.com/o/Circles%2Fyellow.png?alt=media&token=6375fd68-fd93-40b8-a989-aef0e96e10ff'
            ]

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