react-native 加载图片的几种方式

一、RN本地项目图片访问
1.1、通过source——require访问

<Image source={require(’./img/icon.png’)} style={styles.imageStyle}/>

1.1.1、 Image的缩放模式resizeMode
cover: 保持图片宽高比缩放直到图片宽和高都等于或者大于容器宽高，默认属性
contain: 保持图片宽高比缩放直到图片宽高小于或等于容器宽高
stretch: 拉伸，不保持图片宽高比拉伸，直到图片铺满容器宽高
repeat: 维持图片宽高比平铺图片(只在ios平台可用)
center: 图片居中但是不拉伸
1.2、加载网络图片
使用例子:
<Image
style={{width:50,height:50,borderWidth:1}}
source={{uri:‘https://avatar.youkuaiyun.com/7/4/C/1_u013519084.jpg?1541993124’}}
/>
显示网络图片需要指定宽和高，否者不能显示出来
1.3、 显示andorid/ios原生图片，分别在andorid项目建立drawable文件夹放入图片，在Ios项目图片文件夹下放入同名图片
source={{uri:‘ic_bike’}}
原生项目的图片和网路图片加载需要指定大小才可显示，style里使用tintColor可以图片资源着上新的颜色
1.4、 使用本地文件系统资源
指定uri路径，andorid路径使用f"ile:///"+路径，注意android 7.0手机文件权限问题

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  ImageBackground
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
//引入
var Dimensions = require('Dimensions');

const App = () => {
  return (
    <Fragment>
      <View style={styles.container}>
        {/*从项目中加载图片*/}
        <Text>1.从项目中加载图片</Text>
        <Image source={require('./img/icon.png')} style={styles.imageStyle}/>

        {/*从资源包中加载图片*/}
        <Text>2.从APP中加载图片</Text>
        <Image source={{uri: 'bd_logo1'}} style={styles.imageStyle} />

        {/*从网络中加载图片*/}
        <Text>3.从网络中加载图片</Text>
        <Image source={{url:'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=fb54c9b31bdfa9ecfd2e51115aeb903e/b03533fa828ba61ea15463804b34970a314e59e2.jpg'}} style={styles.imageStyle}/>


        {/*用图片设置背景*/}
        <Text>4.用图片设置背景</Text>
        <ImageBackground source={{uri:'http://f.hiphotos.baidu.com/image/h%3D300/sign=0c78105b888ba61ec0eece2f713597cc/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg'}} style={styles.imageStyle}>
          <Text style={{marginTop:40,backgroundColor:'transparent',fontSize:30}}>我是文字</Text>
        </ImageBackground>
      </View>

    </Fragment>
  );
};

const styles = StyleSheet.create({
    container: {
      //占满屏幕
      flex:1,
      //设置主轴的对齐方式
      justifyContent:'center',
      //设置侧轴的对齐方式
      alignItems:'center'
    },
    imageStyle:{
      width:160,
      height:160,
      borderRadius:30,
      resizeMode:'cover'
    }
});

export default App;