Image組件

/*  Image*   用於顯示圖片的組件,包括網絡圖片,靜態資源 *   經常使用性能: *   resizeMode 圖片適應模式 cover , contain , stretch *   source     圖片的引用地址 * *  iOS支持的屬性: onLoad , onLoadEnd ,onLoadStart, onProgress  *  *  練習:顯示兩張圖片,分別是網絡圖片,靜態資源 *   https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512489433426&di=fcc41e3d4a372da2f5098d0f121d5224&imgtype=0&src=http%3A%2F%2Fimg1c.xgo-img.com.cn%2Fpics%2F1538%2Fa1537493.jpg** */export default class App extends Component<> {  render() {    return (        <View style={styles.container}>          <View style={styles.net}>            <Image                style={styles.netImage}                source={{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512489433426&di=fcc41e3d4a372da2f5098d0f121d5224&imgtype=0&src=http%3A%2F%2Fimg1c.xgo-img.com.cn%2Fpics%2F1538%2Fa1537493.jpg"}}            />          </View>          <View style={styles.local}>            <Image            style={styles.localImage}            source={require("image!圖片的名字")}//固定寫法image! 在歎號後面寫"圖片的名字"            />          </View>        </View>    );  }}var styles = StyleSheet.create({  container:{    flex:1,    margin:25,    alignItems:"center"  },  net:{    marginTop:30,    width:300,    height:300,    justifyContent:"center",    alignItems:"center",    backgroundColor:"cyan"  },  netImage:{     width:280,    height:200,    backgroundColor:"gray"  },  local:{    marginTop:30,    width:300,    height:300,    justifyContent:"center",    alignItems:"center",    backgroundColor:"yellow"  },  localImage:{    width:280,    height:200,    backgroundColor:"gray"  },});
相關文章
相關標籤/搜索