zoukankan      html  css  js  c++  java
  • 【Facebook的UI开发框架React入门之八】Image的使用简单介绍(iOS平台)-goodmao

    ---------------------------------------------------------------------------------------------------
    React.native是facebook开源的一套基于JavaScript的开源框架,
    非常方便用来开发移动设备的app。
    并且,方便及时更新app的UI与数据。也非常方便部署。
    goodmao希望帮助大家迅速上手掌握!
    ----------------------------------------------------------------------------------------------------

    參考:
    源代码參考:Layout.h/.c文件
    ----------------------------------------------------------------------------------------------------

    我们这一节,简介关于图像Image的使用。
    目的是让大家在分分钟内理解并学会使用方法。


    一、Image简单介绍:
    React能够载入并显示多种来源的图片,包含:
    1.本地静态资源图,本地暂时图;
    2.网络图。
    3.本地磁盘图(比如相冊或相机)。


    二、用法

    (1)本地静态图使用
        1.加入图片到项目中
           加入图片到项目中后。生成的app中直接包括了静态图片资源,能够直接使用。

           
           有两种方式加入图片到项目中,如图:
           a.直接在xcode中加入目录和图片
           b.在Images.xcassets中加入图片



        2.载入并显示
          a.定义样式
    var styles = StyleSheet.create({
      container: {
        //flex: 1,
    
        flexDirection: 'row',
    
        position: 'absolute',
        top:   100,
        left:  10,
    
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
    
      size: {
          100,
        height: 150,
      },
    });
    注意:须要设置flex属性为0或者使用默认值。否则flex:1,则图片会被拉伸。



          b.创建类载入并显示图片
          说明:导入本地静态资源图的方法为 require('image!1'),
                    当中,參数'image' 表示载入图片文件,參数'1' 是图片文件名称,
                    两者中间用感叹号'!'分隔。
          注意:我尝试了用这两种方式载入jpg图片,竟然没显示,还没查明原因。

                     假设哪位搞定,麻烦告知和给各位朋友分享。
    var HelloReact = React.createClass({
    
      //设置视图Image
      render: function() {
        return (
          <View style = {styles.container}>
             <Image
              style = {styles.size}
              source = {require('image!1')} //1.Images.xcassets图片
            />
    
             <Image
              style = {styles.size}
              source = {require('image!2')} //2.Xcode中直接加入Images路径和图片
            />
          </View>
        );
      }
    });




    (2)载入并显示server的图片
        1.加入图片到server
          在我们測试项目 HelloReact的目录中。与index.ios.js同一级目录,
          创建目录存:server-image。存放以下js中须要载入的图片文件。



        2.载入并显示图片
           a.样式定义同上

           b.创建类并载入和显示网络图
           说明:直接用属性uri: 就可以载入网络图片,且支持常见图片格式(png,jpg等)。
    var HelloReact = React.createClass({ //创建组件类
    
      //组件的渲染方法
      //设置视图Image
      render: function() {
        return (
          <View style = {styles.container}>
              <Image
                  source = {{uri: 'http://172.16.105.149:8081/server-image/goodmao.jpg'}} //3.网络图
                  style = {styles.size}
              />
          </View>
        );
      }
    });


    三、执行效果图:



    说明:图片来自“小偶App”,好玩吧?!
               喜欢自拍的朋友。不要错过,哈哈!


  • 相关阅读:
    scripting.dictionary的彻底研究
    希望老人江诗信
    JavaScript正则表达式
    ASP日期和时间函数示例
    Asp网页制作技巧
    常见URL字符及URL编码值
    ASP.NET中如何调用存储过程
    【网摘】C#处理Json的另外一种方式 拓荒者
    使用Lucene.net进行全文查找多关键字匹配 拓荒者
    C#通用类型转换 Convert.ChangeType 拓荒者
  • 原文地址:https://www.cnblogs.com/yfceshi/p/6877233.html
Copyright © 2011-2022 走看看