React-Native-属性、控件、样式

作者: 精神病患者link常 | 来源:发表于2017-03-29 13:31 被阅读5030次
    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    //PropTypes 使用属性是必须导入
    import React,{ Component , PropTypes } from 'react';
    
    //使用控件时必须导入,StyleSheet创建属性是必须导入
    import {AppRegistry, Text , Image , View , StyleSheet} from  'react-native';
    
    //export default 必须写,导出,外部才可以访问
    export default class test extends Component {
    
      render(){//所哟的类必须有自己的reder方法,用于输入组件,return里面必须返回一个组件,只能是一个组件,多个用view包裹
    
    
    //在此可以声明变量
          let picURL = {//参数必须为uri,其他的图片显示不出来
            uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
          };
    
          return (
              /*
              * 加载图片
              *
              * 加载网络图片,必须要指定宽和高,不然显示不出来,网络图片不确定图片的size
              *
              * 加载本地图片,不需要指定宽和高,当然也可以自定义,因为本地图片确定了图片的size
              * */
    
              //使用自定义控件时,只给它的属性赋值即可
    
              <View style={ViewStyle.myStyleSelect}>
    
    
                <Image source={picURL} style={{width: 100, height:100}}></Image>
    
    
                <Image source={require('./image/cat1.jpg')} style={ViewStyle.myStyleSelect1}></Image>
    
                <Greetings abc="jick"/>
                <Greetings abc="luch"/>
                <Greetings abc="math"/>
    
    
                <Person name={'于小宝'} age={23}/>
                <Person name={'李大头'} age={34}/>
              </View>
          );
      }
    
    }
    
    //自定义控件,显示格式统一'hello+字符串',所以可以自定义一个view自带hello,填入后面的字符串即可
    class Greetings extends Component {
      render(){
    
        return(
    
          <Text>Hello {this.props.abc} !</Text>//hello+属性字符串
    
        );
    
      }
    }
    
    //自定义控件,声明两个属性name和age,返回文本
    class Person extends Component {
    
    //声明属性的方法
        static propTypes={
    
            name :PropTypes.string,//指定属性的类型
            age  :PropTypes.number
    
        };
    
    
    
        render(){
    
    
          return(
              <Text style={{fontWeight:'bold',lineHeight:30}}>姓名:{this.props.name};年龄:{this.props.age}</Text>
        );
    
    
      }
    
    
    }
    
    //自定义样式,里面可以指定多个样式,使用时 ViewStyle.myStyle 即可
    var ViewStyle =StyleSheet.create({
    
        myStyle:{
            alignItems:'center',
        },
        myStyleSelect:{
            alignItems:'center',
            backgroundColor:'red',
            borderWidth:2,
            borderColor:'#00ff00',
            borderStyle:'dotted',
    
        },
        myStyleSelect1:{
            bottom:20,
            left:20,
    
        }
    
    });
    
    /*
    *ReactNative中能使用的css样式
     Valid style props: [
    
     "alignItems",居中对齐弹性盒的各项 <div> 元素
     例:alignItems:'center',
     -> stretch(项目被拉伸以适应容器)
     -> center(项目位于容器的中心)
     -> flex-start(项目位于容器的开头)
     -> flex-end(项目位于容器的结尾)
     -> baseline(项目位于容器的基线上)
     -> initial(设置该属性为它的默认值)
     -> inherit(从父元素继承该属性)
    
     "alignSelf",居中对齐弹性对象元素内的某个项
     例:alignSelf:'center',
     -> auto(默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch")
     -> stretch(项目被拉伸以适应容器)
     -> center(项目位于容器的中心)
     -> flex-start(项目位于容器的开头)
     -> flex-end(项目位于容器的结尾)
     -> baseline(项目位于容器的基线上)
     -> initial(设置该属性为它的默认值)
     -> inherit(从父元素继承该属性)
    
     "backfaceVisibility",当元素不面向屏幕时是否可见
     例:backfaceVisibility:'visible'
     -> visible (背面是可见的)
     -> hidden  (背面是不可见的)
    
     "backgroundColor",背景色
     例:backgroundColor:'red'
     例:backgroundColor:'#cccccc'
     -> color   (指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表)
     -> transparent (指定背景颜色应该是透明的。这是默认)
     -> inherit (指定背景颜色,应该从父元素继承)
    
     "borderBottomColor",底部边框颜色
     例:borderBottomColor:'red'
     例:borderBottomColor:'#cccccc'
     -> color   (指定背景颜色。在CSS 颜色值 查找颜色值的完整列表)
     -> transparent (指定边框的颜色应该是透明的。这是默认)
     - >inherit (指定边框的颜色,应该从父元素继承)
    
    
     "borderBottomLeftRadius",左下角添加圆角边框
     例:borderBottomLeftRadius:10
    
     "borderBottomRightRadius",右下角添加圆角边框
     例:borderBottomRightRadius:10
    
     "borderBottomWidth",底部边框宽度
     例:borderBottomWidth:8
    
     "borderColor",四个边框颜色
     例:borderColor:'#00ff00'
    
     "borderLeftColor",左边框颜色
     例:borderLeftColor:'yellow'
    
     "borderLeftWidth",左边框宽度
     例:borderLeftWidth:10
    
     "borderRadius",四角圆角弧度
     例:borderRadius:15
    
     "borderRightColor",右边框颜色
     例:例:borderRightColor:'yellow'
    
     "borderRightWidth",右边框宽度
     例:borderRightWidth:10
    
     "borderStyle",四个边框的样式
     例:borderStyle:'dotted'
     -> none    定义无边框。
     -> hidden  与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
     -> dotted  定义点状边框。在大多数浏览器中呈现为实线。
     -> dashed  定义虚线。在大多数浏览器中呈现为实线。
     -> solid   定义实线。
     -> double  定义双线。双线的宽度等于 border-width 的值。
     -> groove  定义 3D 凹槽边框。其效果取决于 border-color 的值。
     -> ridge   定义 3D 垄状边框。其效果取决于 border-color 的值。
     -> inset   定义 3D inset 边框。其效果取决于 border-color 的值。
     -> outset  定义 3D outset 边框。其效果取决于 border-color 的值。
     -> inherit 规定应该从父元素继承边框样式。
    
     "borderTopColor",上边框颜色
     例:borderTopColor:'red'
    
     "borderTopLeftRadius",左上角圆角弧度
     例:borderTopLeftRadius:3
    
     "borderTopRightRadius",右上角圆角弧度
     例:borderTopRightRadius:4
    
     "borderTopWidth",顶部边框宽度
     例:borderTopWidth:13
    
     "borderWidth",四个边框的宽度
     例:borderWidth:2
    
     "bottom",图像的底部边缘
     例:bottom:20
    
     "color",颜色
     例:color:'red'
    
     "elevation",Z轴,可产生立体效果
     例:elevation:1
    
     "flex",让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容
     例:flex:1
    
     "flexDirection",设置 <div> 元素内弹性盒元素的方向为相反的顺序
     例:flexDirection:'column'
     -> row ((默认值。灵活的项目将水平显示,正如一个行一样)
     -> row-reverse (与 row 相同,但是以相反的顺序)
     -> column  (灵活的项目将垂直显示,正如一个列一样)
     -> column-reverse  (与 column 相同,但是以相反的顺序)
     -> initial (设置该属性为它的默认值。请参阅 initial)
     -> inherit (从父元素继承该属性。请参阅 inherit)
    
     "flexWrap",让弹性盒元素在必要的时候拆行
     例:flexWrap:'wrap'
     -> nowrap  (默认值。规定灵活的项目不拆行或不拆列)
     -> wrap    (规定灵活的项目在必要的时候拆行或拆列)
     -> wrap-reverse    (规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序)
     -> initial (设置该属性为它的默认值。请参阅 initial)
     -> inherit (从父元素继承该属性。请参阅 inherit)
    
     "fontFamily",字体
     例:fontFamily:'courier'
    
     "fontSize",字体大小
     例:fontSize:20
    
     "fontStyle",
     例:fontStyle:'italic'
     -> normal  默认值。浏览器显示一个标准的字体样式。
     -> italic  浏览器会显示一个斜体的字体样式。
     -> oblique 浏览器会显示一个倾斜的字体样式
    
     "fontWeight",文本的粗细
     例:fontWeight:'bold'
     -> normal  (默认值。定义标准的字符)
     -> bold    (定义粗体字符)
     -> bolder  (定义更粗的字符)
     -> lighter (定义更细的字符)
     -> 100    (定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold)
     -> 200
     -> 300
     -> 400
     -> 500
     -> 600
     -> 700
     -> 800
     -> 900
    
     "height",设置元素的高度
     例:height:200
    
     "justifyContent",在弹性盒对象的元素中的各项周围留有空白
     例:justifyContent:'space-between'
     -> flex-start  (默认值。项目位于容器的开头)
     -> flex-end    (项目位于容器的结尾)
     -> center  (项目位于容器的中心)
     -> space-between   (项目位于各行之间留有空白的容器内)
     -> space-around    (项目位于各行之前、之间、之后都留有空白的容器内)
    
     "left",把图像的左边缘设置在其包含元素左边缘向右5像素的位置
     例:left:20
    
     "letterSpacing",字母间距
     例:letterSpacing:20
    
     "lineHeight",行高
     例:lineHeight:30
    
     "margin",元素的所有四个边距
     例:
    
     "marginBottom",下边距
     例:marginBottom:50
    
     "marginHorizontal",水平间距,即左边距和右边距
     例:marginHorizontal:10
    
     "marginLeft",左边距
     例:marginLeft:50
    
     "marginRight",右边距
     例:marginRight:50
    
     "marginTop",上边距
     例:marginTop:50
    
     "marginVertical",垂直间距,即上边距和下边距
     例:marginVertical:10
    
     "opacity",透明度级别
     例:opacity:0.5
    
     "overflow",设置overflow属性进行滚动
     例:overflow:'hidden'
     visible    (默认值。内容不会被修剪,会呈现在元素框之外)
     hidden (内容会被修剪,并且其余内容是不可见的)
     scroll (内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容)
    
     "overlayColor",
     例:
    
     "padding",填充
     例:
    
     "paddingBottom",下填充
     例:
    
     "paddingHorizontal",左右填充
     例:
    
     "paddingLeft",左填充
     例:
    
     "paddingRight",右填充
     例:
    
     "paddingTop",上填充
     例:
    
     "paddingVertical",上下填充
     例:
    
     "position",定位
     例:position:'fixed'
     -> absolute    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
     -> fixed       生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
     -> relative    生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
     -> static      默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
    
     "resizeMode",用户调整大小
     例:resizeMode:'cover'
     -> cover    等比拉伸
     -> strech   保持原有大小
     -> contain  图片拉伸  充满空间
    
     "right",把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置
     例:right:5
    
     "rotation",元素旋转
     例:rotation:180
    
     "scaleX",
     例:
    
     "scaleY",
     例:
    
     "shadowColor",
     例:
    
     "shadowOffset",
     例:
    
     "shadowOpacity",
     例:
    
     "shadowRadius",
     例:
    
     "textAlign",文本对齐方式
     例:textAlign:'left'
     -> left    把文本排列到左边。默认值:由浏览器决定。
     -> right   把文本排列到右边。
     -> center  把文本排列到中间。
     -> justify 实现两端对齐文本效果
    
     "textAlignVertical",
     例:
    
     "textDecorationColor",下划线文本中下划线的颜色
     例:textDecorationColor:'red'
    
     "textDecorationLine",显示一条线
     例:textDecorationLine:'underline'
     -> none            默认值。规定文本修饰没有线条。 测试 »
     -> underline       规定文本的下方将显示一条线。  测试 »
     -> overline        规定文本的上方将显示一条线。  测试 »
     -> line-through    规定文本的中间将显示一条线
    
     "textDecorationStyle",显示一条线的样式
     例:textDecorationStyle:'solid'
     -> solid   默认值。线条将显示为单线。
     -> double  线条将显示为双线。
     -> dotted  线条将显示为点状线。
     -> dashed  线条将显示为虚线。
     -> wavy    线条将显示为波浪线
    
     "textShadowColor",文字阴影颜色
     例:textShadowColor:'red'
    
     "textShadowOffset",文字阴影偏移量
     例:textShadowOffset:2
    
     "textShadowRadius",文字阴影圆角
     例:textShadowRadius:3
    
     "tintColor",
     例:
    
     "top",上
     例:
    
     "transform",旋转
     例:
     none   定义不进行转换。
     matrix(n,n,n,n,n,n)    定义 2D 转换,使用六个值的矩阵。
     matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)  定义 3D 转换,使用 16 个值的 4x4 矩阵。
     translate(x,y) 定义 2D 转换。
     translate3d(x,y,z) 定义 3D 转换。
     translateX(x)  定义转换,只是用 X 轴的值。
     translateY(y)  定义转换,只是用 Y 轴的值。
     translateZ(z)  定义 3D 转换,只是用 Z 轴的值。
     scale(x[,y]?)  定义 2D 缩放转换。
     scale3d(x,y,z) 定义 3D 缩放转换。
     scaleX(x)  通过设置 X 轴的值来定义缩放转换。
     scaleY(y)  通过设置 Y 轴的值来定义缩放转换。
     scaleZ(z)  通过设置 Z 轴的值来定义 3D 缩放转换。
     rotate(angle)  定义 2D 旋转,在参数中规定角度。
     rotate3d(x,y,z,angle)  定义 3D 旋转。
     rotateX(angle) 定义沿着 X 轴的 3D 旋转。    测试
     rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
     rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
     skew(x-angle,y-angle)  定义沿着 X 和 Y 轴的 2D 倾斜转换。
     skewX(angle)   定义沿着 X 轴的 2D 倾斜转换。
     skewY(angle)   定义沿着 Y 轴的 2D 倾斜转换。
     perspective(n) 为 3D 转换元素定义透视视图
    
     "translateX",
     例:
    
     "translateY",
     例:
    
     "width",款
     例:
    
     "writingDirection"文本方向
      auto’,’ltr’,’rtl
    
     *
    * */
    
    
    AppRegistry.registerComponent('test' ,() => test);//第一个test是项目名字,后面的test是当前方法的名字(需要运行的方法)
    
    
    

    相关文章

      网友评论

      本文标题:React-Native-属性、控件、样式

      本文链接:https://www.haomeiwen.com/subject/nfbeottx.html