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}} />

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