360SDN.COM

React-native之image图片设置

来源:  2017-06-18 12:03:40    评论:0点击:

1、Images:

①静态图片资源:

  1. <Image source={require('./my-icon.png')} />  
  1. // 错误  
  2. var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';  
  3. <Image source={require('./' + icon + '.png')} />  
  4.   
  5. // 正确  
  6. var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');  
  7. <Image source={icon} />  

②使用混合App的图片资源:

如果你在编写一个混合App(一部分UI使用React Native,而另一部分使用平台原生代码),也可以使用已经打包到App中的图片资源(通过Xcode的asset类目或者Android的drawable文件夹打包)

 
  1. <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />  
③网络图片
 
  1. // 正确  
  2. <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}  
  3.        style={{width: 400, height: 400}} />  
  4.   
  5. // 错误  
  6. <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />  
需指定大小。
④资源属性是一个对象
 
  1. <Image source={{uri: 'something.jpg'}} />  
⑤通过嵌套来实现背景图片
 
  1. <Image source={...}>  
  2.    <Text>Inside</Text>  
  3.  </Image> 
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权