React Native - Image

无论是原生的Native或者跨平台的Native，使用Image的情况非常多，今天主要练习学习了加载网络图片，和加载Xcode工程中images.xcassets中得图片。

废话不多说，上代码：

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.box}>
          <Image style={styles.netImg} source={{uri:"http://ncicar.cn-bj.ufileos.com/ncicar/index01.png"}} resizeMode={Image.resizeMode.contain} />
          <Image style={styles.netImg} source={{uri:'user_bg'}} resizeMode={Image.resizeMode.contain} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    box: {
        flex:1,
        marginTop:44,
        justifyContent:'center',
        alignItems:'center',
    },

    netImg:{
        marginTop:10,
        width:300,
        height:200,
    }
});

RN中使用Image，可以设置图片的显示样式，分别为：

• auto：使用启发式算法来在resize和scale中自动决定。

• resize： 在图片解码之前，使用软件算法对其在内存中的数据进行修改。当图片尺寸比容器尺寸大得多时，应该优先使用此选项。

• scale：对图片进行缩放。和resize相比， scale速度更快（一般有硬件加速），而且图片质量更优。在图片尺寸比容器尺寸小或者只是稍大一点时，应该优先使用此选项。

注意点：

   1、开发iOS项目的时候，图片资源存放在images.xcassets中，开发Android的时候，在android/app/src/res文件夹下面创建一个drawable文件夹，然后放入图片文件，重新打包项目运行即可。

// iOS引用
<Image source={{uri: 图片名称'}} style={{width: 40, height: 40}} />

// Android引用
<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

这种方法提供非安全的检查，取决于你去确保这些图片是可以访问得到，而且，不得不手动指定图片的尺寸。

2、如果不指定加载网络图片的高度(会根据高度来适配正确的宽度，则显示不出加载的图片。

样式如下：

以上加载图片的方式为加载App中的图片和加载网络上的图片，那么如何加载项目中的图片呢？

<Image source={require('图片名称')} style={{width: 40, height: 40}} />

完美实现！