Iamge组件

来源:互联网 发布:log4cpp 网络传输 编辑:程序博客网 时间:2024/05/22 00:49

代码

//Image组件import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image} from 'react-native';/*    用于显示图片的组件,包括网络图片,静态资源等等    常用性能:        resizeMode   图片适应模式 cover.contain.stretch        source   图片引用地址        iOS 支持属性: onLoad,onLoadend,onLoadStart,onProgress https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9922720e0cf3d7ca50970679f81fbe096b63a95f.jpg*/// 组件var HelloReactNative = React.createClass({    render: function () {        return (            <View style={styles.container}>                <View style={styles.net}>                    {/*网络资源*/}                    <Image                        style={styles.netImage}                        source={{url:"https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9922720e0cf3d7ca50970679f81fbe096b63a95f.jpg"}}                    />                </View>                <View style={styles.local}>                    {/*本地资源  source={require("image!waitToDesign1")} 要注意中间的!连接符号*/}                    <Image                        style={styles.localImage}                        source={require("image!waitToDesign1")}                    />                </View>            </View>        );    }});//样式var styles = StyleSheet.create({    container:{        flex:1,        margin:25,        alignItems:"center"    },    net:{        marginTop:30,        width:300,        height:240,        justifyContent:"center",        alignItems:"center",        backgroundColor:"cyan"    },    netImage:{        width:280,        height:200,        backgroundColor:"gray"    },    local:{        marginTop:30,        width:300,        height:200,        justifyContent:"center",        alignItems:"center",        backgroundColor:"yellow"    },    localImage:{        width:180,        height:180,        backgroundColor:"#29b39d"    }});AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);

配置:

本地资源要添加在 xcode 工程的 Image文件中
加入网络图片的是 http 网络,那么就需要子啊 xcode的 plist 文件 中设置下网络安全模式

iOS 开发 设置网络请求允许使用http

原因是:苹果官方为了安全使用了HTPPS 作为安全访问链接 如果想继续使用http

解决办法:修改info.plist文件
在 App Transport Security Settings 添加: Allow Arbitrary Loads 设置为YES

这里写图片描述

需要把资源添加到Xcode 的 Images.xcassets 中,您都需要在使用它之前通过 Xcode 来重新构建您的应用程序 — — 仅在模拟器内重新加载它是不够的。

原创粉丝点击