ReactNative Image 组件

ReactNative Image 组件

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    TextInput,    Image,} from 'react-native';/** 8、Image 组件 * 用于显示图片的组件，包括网络图片，静态资源等 * resizeMode 图片适应模式 cover contain stretch * source 图片应用地址 * ios 支持属性 onLoad onLoadEnd onLoadStart onProgress * * 需求：显示两张图片 网络图片、静态资源图片 *http://img.zcool.cn/community/01bf1655e514b16ac7251df840273f.jpg * */let RnDemo = React.createClass({    render: function () {        return (            <View style={styles.container}>                <View style={styles.net}>                    <Image style={styles.netImg}                           source={{uri: "http://img.zcool.cn/community/01bf1655e514b16ac7251df840273f.jpg"}}                    />                </View>                <View style={styles.local}>                    <Image                        style={styles.localImg}                        source={require("./images/img_1.jpg")}                    />                </View>            </View>        );    }});let styles = StyleSheet.create({    container: {        flex: 1,        margin: 25,        alignItems: 'center'    },    net: {        marginTop: 30,        width: 300,        height: 240,        justifyContent: 'center',        alignItems: "center",        backgroundColor: "cyan"    },    netImg: {        width: 280,        height: 200,        // resizeMode:"cover",        backgroundColor: "gray",    },    local: {        marginTop: 30,        width: 300,        height: 200,        justifyContent: 'center',        alignItems: "center",        backgroundColor: "yellow"    },    localImg: {        width: 180,        height: 150,        // resizeMode:"contain",        backgroundColor: "gray",    }});