React Native的学习图片简单的两种加载方式

直接奔主题吧,我是开发安卓的,业余时间学习一下RN,先从最基础的知识开始。
从加载图片说起吧:
下面是官方API;

Most components can be customized when they are created, with different parameters. These creation parameters are called props.
大多数组件可以定制创建时,使用不同的参数。这些创建参数被称为道具

For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows
例如,一个图像基本反应本地组件。当你创建一个图像的时候,你可以使用道具叫源来控制图像显示
下面直接上代码

  let pic = {
 uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
     };
     return (
       <Image source={pic} style={{width: 193, height:110},
       styles.instructions}/>
     );

Image就是那个显示图片的组件,uri就是我们要加载的图片的地址
这里需要注意一下,别忘了把组件注册一下。
是不是很简单,这里是网络的图片,那么怎么加载本地的图片显示呢
加载本地图片需要分两步:
在原生平台的开发工具中导入图片资源:如加载myicon
iOS平台导入静态图片:
Android平台需要在src\main\res\drawable中加入图片资源
通过require(image!myicon)的方式加载图片

<Image source={require('image!myicon')} style={{width: 40, height: 40, marginLeft: 8, marginRight: 8}} />

知识靠一点点积累~加油~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值