Question

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

的软件包

react-native-image-zoom-viewer

但是我的代码未显示图像。它始终是黑屏。这是我的代码

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
	<link rel="stylesheet" type="text/css" href="ddaac.css">
	<title>DDA.AC</title>
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">DDA.AC</a>
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li><a href="#">컨텐츠</a></li>
		        <li><a href="#">덱리스트</a></li>
		        <li><a id="card" href="#">카드평가</a></li>
		        <li><a href="#">트위터</a></li>
		        <li><a href="#">게시판</a></li>   
		      </ul>
		     
		      <ul class="nav navbar-nav navbar-right">
		        <li><a id="login" href="#">로그인</a></li>      
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->	
	</div>
	</nav>

	<div class="jumbotron">
		
	</div>


	<script src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>	
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
</body>
</html>

Answer 1

更改图像数组以使其与guidelines

对齐

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}'
            ]

要使用s来动态传递所需的数组，请使用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>
                    )
                }
            }

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

1 个答案: