ReactNative学习十八－Text/Image属性与风格

A.Text

1.Text属性

numberOfLines(number):设置文本行数

onPress(function):点击触发方法

2.Text样式

1.继承可以使用View组件的所有Style(具体查看http://facebook.github.io/react-native/docs/view.html#style)

2.color:字体颜色

3.fontFamily 字体名称('Cochin')

4.fontSize 字体大小

5.fontStyle 字体风格(normal,italic)

6.fontWeight 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

7.textShadowOffset 设置阴影效果{width: number, height: number}

8.textShadowRadius 阴影效果圆角

9.textShadowColor 阴影效果的颜色

10.letterSpacing 字符间距

11.lineHeight 行高

12.textAlign 文本对其方式("auto", 'left', 'right', 'center', 'justify')

13.textDecorationLine 横线位置 ("none", 'underline', 'line-through', 'underline line-through')

14.textDecorationStyle 线的风格("solid", 'double', 'dotted', 'dashed')

15.textDecorationColor 线的颜色

16.writingDirection 文本方向("auto", 'ltr', 'rtl')



B.Image

1.Image属性方法

1.onLayout (function) 当Image布局发生改变的，会进行调用该方法，调用的代码为:

{nativeEvent: {layout: {x, y, width, height}}}.

2.onLoad (function):当图片加载成功之后，回调该方法

3.onLoadEnd (function):当图片加载失败回调该方法，该不会管图片加载成功还是失败

4.onLoadStart (fcuntion):当图片开始加载的时候调用该方法

5.resizeMode 缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片

6.source {uri:string} 进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

2.Image样式风格

1.FlexBox 支持弹性盒子风格

2.Transforms 支持属性动画

3.resizeMode 设置缩放模式

4.backgroundColor 背景颜色

5.borderColor 边框颜色 6.borderWidth 边框宽度

7.borderRadius 边框圆角

8.overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')

9.tintColor 颜色设置

10.opacity 设置不透明度0.0(透明)-1.0(完全不透明)