最近初探React-Native,开始写一点自己的心得,今天第一天,跟大家介绍一个最最最简单的小控件。
那就是React-Native中最常用的,图片加载控件 <image>
<image>,没错,这货在android 里我门叫他 ImageView
用法非常简单。
好,身为程序猿。废话少说,贴代码:
一行代码,搞定android,ios双端本地图片加载。
本地图片的加载
<Image source={require('./my-icon.png')} />
注意:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串(不能使用变量!因为require是在编译时期执行,而非运行时期执行!)
// 正确
<Image source={require('./my-icon.png')} />
// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
太low了?对,太low了,我们来点高端的:
讲下网络图片的加载,从前我们在android中,是需要一个叫ImageLoader这位兄弟帮忙的,如今在我大RN之中,我只对你们说三个字:不需要!
image自带网络图片加载,并提供了丰富的参数满