<html >
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.fa{
width:340px
}
ol{
list-style:none
margin:0px
padding:0px
}
li{
float:left
width:100px
height:50px
background:#0F0
margin:5px
}
.fg{
width:45px
}
</style>
</head>
<body>
<div class="fa">
<ol>
<li>1</li>
<li>2</li>
<li class="fg">3</li>
<li class="fg">4</li>
<li>5</li>
<li>6</li>
<li class="fg">7</li>
<li class="fg">8</li>
<li>9</li>
<li>10</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ol>
</div>
</body>
</html>
<!doctype html><html>
<head>
<meta charset="UTF-8" />
<title>Metro风兼搭瀑布流</title>
<style>
body{background:#000}
.myMetro{position:relativeoverflow:hiddenzoom:1margin:0 auto}
.MBox{float:left}
.widgetBox{position:relativeoverflow:hiddenwidth:180pxheight:160px}
.innerBox a{display:blockwidth:100%height:100%outline:nonetext-decoration: none}
</style>
<script>
/* 格子排序 */
var metro = {}
metro.init=function(wrap){
metro.gen={w:190,h:170}
metro.wrap = wrap
metro.sizeArray= []//格子,[1,2]就表示1X2的大格子
metro.preset()
metro.putData(wrap)
}
metro.preset = function(){
metro.nameSpace= {}
metro.maxY = -1
metro.basePos = {x:0, y:0}
metro.memory = {flag:Infinity, x: Infinity, y:Infinity}
metro.row = document.documentElement.offsetWidth / metro.gen.w >>0
metro.wrap.style.width = metro.row * metro.gen.w + "px"
}
metro.resort=function(){
metro.preset()
metro.mbox = $class("MBox")
metro.sort(metro.sizeArray)
}
metro.putData = function(list){
(function setBig(){ //大格子初始化设置
var bigBox = $class("bigBox",list)
很多时候React Native在引入资源文件的时候比如SVG，JSON文件资源的时候，需要把文件放在对应的原生工程里面去（IOS和Android分别放入），这样其实对于资源使用的整理是很麻烦的，其实官网也是有考虑到这个问题的，在React Native中文文档的图片-静态资源说明中也有提到（ 点击此处连接 ）。这个配置是在node_modules文件及里面的metro打包工具下，从这里可以看到React Native支持的文件格式，我们只要往里面添加想要的格式就可以。
当然，你也可以从外部导入，在React Native创建项目的时候，也会生成一个名为metro.config.js的配置文件，直接在这里面添加就可以（注意，直接添加的话会覆盖之前的配置文件的内容，需要通过...方式进行添加）。
当然metro还可以添加各种配置，具体可以见 Metro官网 。
使用的方式其实就是跟平常的React Native引入资源的方式是一样的，直接require()进行引入就行，我们这里举一个例子。
log打出的效果如下：
debug模式返回的结果为：
debug模式下会得到资源文件的url地址连接，这是因为React Native会debug模式中会把所有资源文件打包到index.js服务器上面去，url的话就可以传到原生自己去处理了。
release的返回结果为（Android）：
在release模式下返回的结果其实就是这个资源文件的名字，这是因为React Native会通过Metro打包工具来吧外部依赖的资源文件全部进行打包进apk，并且小重新命名，它的命名规则是路径 路径 资源文件名字，而我们直接打开apk则可以在raw下看到这个文件，我们自己自定义支持的文件格式都会被打到raw文件夹下（经小部分测试，部分React Native官方支持的文件格式也会被打包进raw文件夹下，比如ttf和svg等，暂时没找到怎么自定义打包资源路径，如果有知道的大神请指教）。
至于IOS的release模式下，拿到的是一个路径而不是文件名字，需要另外做处理，然后在传递给原生进行业务处理。
