//6.静态图片资源  <Image source={require('./my-icon.png')} />

 

import React, { useState } from 'react';

import { View, Text, Image } from 'react-native';

 

const ImageDemo = () => {

    return (

        <View>

            <Text>hello</Text>

            {/* 使用本地assets文件夹下的图片icon_yunyu.png */}

            <Text>使用本地图片</Text>

            <Image source={require('./assets/icon_yunyu.png')} />

 

            {/* 使用已经打包到 App 中的图片资源（以拖拽的方式放置在 Xcode 的 asset 类目中，或是放置在 Android 的 drawable 目录里）。注意此时只使用文件名，不带路径也不带后缀 */}

            {/* 加载本地 \android\app\src\main\res\drawable  文件夹下的图片icon_yunyu.png */}

            <Text>使用已经打包到 App 中的图片资源</Text>

            <Image source={{ uri: 'icon_yunyu' }}

                style={{ width: 40, height: 40 }}

            />

 

            {/* 加载本地 Android 的 assets 目录中的图片 android\app\src\main\assets\icon_yunyu.png */}

            <Text>加载Android 的 assets 目录中的图片</Text>

            <Image

                source={{ uri: 'asset:/icon_yunyu.png' }}

                style={{ width: 40, height: 40 }}

            />

 

            {/* 加载网络图片：要指定大小*/}

            <Text>加载网络图片</Text>

            <Image source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}

                style={{ width: 100, height: 100 }} />

 

            {/* 加载网络图片——带请求参数*/}

            <Text>加载网络图片——带请求参数</Text>

            <Image

                source={{

                    uri: 'https://facebook.github.io/react/logo-og.png',

                    method: 'POST',

                    headers: {

                        Pragma: 'no-cache'

                    },

                    body: 'Your Body goes here'

                }}

                style={{ width: 100, height: 100 }}

            />

 

            {/* Uri数据图片:请记得指定宽高！   建议仅对非常小的图片*/}

            <Text>Uri数据图片:请记得指定宽高！   建议仅对非常小的图片</Text>

            <Image

                style={{

                    width: 51,

                    height: 51,

                    resizeMode: 'contain'

                }}

                source={{

                    uri:

                        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='

                }}

            />

        </View>

    );

}

 

export default ImageDemo;