key属性 native react

2015-11-24 18:58:28 sbsujjbcy 阅读数 26568

写了这么多篇Android React Native的博文,基本上把复杂的东西都搞定了,接下来来看看一些轻松的东西,和布局有关,就是css样式,那么一个View可以设置哪些css样式呢,是和web中的css样式完全一样呢,还是有所不同呢?其实你只要在样式表中书写一个不存在的样式,就会报一大堆错,提示你该样式不存在,然后提供所有可用的样式给你,如图

这里写图片描述

下面的样式就是样式表中所有可用的属性。

"alignItems",
"alignSelf",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"flex",
"flexDirection",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"height",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"opacity",
"overflow",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection"

接下来我们来一一解释一下。不过在这之前,我们还需要解释一下再React中,样式表的几种使用方法。

样式的声明

var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  },
});

使用样式

<Text style={styles.base} />
<View style={styles.background} />

也可以接收一个数组

<View style={[styles.base, styles.background]} />

也可以根据条件来应用样式

<View style={[styles.base, this.state.active && styles.active]} />

假如this.state.active是true,styles.active就会被应用,如果为false,styles.active就不会被应用。

当然也是支持下面的这种写法

<View
  style={[styles.base, {
    width: this.state.width,
    height: this.state.width * this.state.aspectRatio
  }]}
/>

接下来来讲讲样式表中的具体属性。

定位

定位分为相对定位和绝对定位,属性名为position,属性值为absoluterelative

当使用绝对布局时,定位根据屏幕来进行。

var AwesomeProject = React.createClass({
  render: function() {
    return (
    <View style={styles.container}>
        <View style={styles.box1}/>
        <View style={styles.box2}/>
        <View style={styles.box3}/>
        <View style={styles.box4}/>
   </View>
    );
  },
});

var styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#ff0'//黄色
  },
  box1:{
    width:50,
    height:50,
    backgroundColor:'#f00',//红色
    position :'absolute',
    left:30,//左边距离屏幕左侧30单位
  },
  box2:{
    width:50,
    height:50,
    backgroundColor:'#0f0',//绿色
    position :'absolute',
    top:30,//上边距离屏幕上侧30单位
  },
  box3:{
    width:50,
    height:50,
    backgroundColor:'#f0f',//紫色
    position :'absolute',
    right:30,//右边距离屏幕右侧30单位
  },
  box4:{
    width:50,
    height:50,
    backgroundColor:'#00f',//蓝色
    position :'absolute',
    bottom:30//下边距离屏幕下侧30单位
  }
});

效果图如下。

这里写图片描述

当对应的值为负数时,方向与原方向相反,即如果top为-50,则会整个移出到屏幕外(向上移到50个单位)。

那么相对布局又是怎么样的呢

var AwesomeProject = React.createClass({

  render: function() {
    return (
    <View style={styles.container}>
        <View style={styles.box1}/>
   </View>
    );
  },
});

var styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#ff0'//黄色
  },
  box1:{
    width:50,
    height:50,
    backgroundColor:'#f00',//红色
    position :'relative',
    left:30,
    top:30,
  },
});

效果图

这里写图片描述

可以看到设置了top和left后,相对于不使用定位的位置向右向下移动了30单位,如果值为负数,也是往相反的方向移到。

但是如果设置了right和bottom后,又会怎么样呢

var styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#ff0'//黄色
  },
  box1:{
    width:50,
    height:50,
    backgroundColor:'#f00',//红色
    position :'relative',
    right:30,
    bottom:30,
  },
});

这里写图片描述

其实它的效果就是对应的top和left为负值的情况。距离原来位置的右侧30单位,距离原来位置下侧30单位,即向上向左平移30单位。原来位置就是不使用定位时的位置。如图

这里写图片描述

默认情况下使用的是相对定位

边框宽度

borderBottomWidth //底部边框宽度
borderLeftWidth  //左边边框宽度
borderRightWidth //右边边框宽度
borderTopWidth //顶部边框宽度
borderWidth  //所有边框宽度

你可以使用设置所有边框的宽度,也可以设置指定某条边的宽度。

边框颜色

同边框宽度属性,属性值为字符串类型的rgb表示方式

borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
borderColor

外边距

marginBottom
marginLeft
marginRight
marginTop
marginVertical
marginHorizontal
margin

值得注意的是marginVertical相当于同时设置marginTop和marginBottom,marginHorizontal相当于同时设置marginLeft和marginRight,margin相当于同时设置四个

内边距

paddingBottom  
paddingLeft  
paddingRight  
paddingTop  
paddingVertical
paddingHorizontal  
padding 

背景色

背景色,属性值为字符串类型的rgb表示方式

backgroundColor

边框圆角

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
borderRadius

宽高

width 
height

Flex布局相关

相关内容见Flex 布局教程:语法篇Flex 布局教程:实例篇,个人觉得写得很清晰

flex number 
flexDirection enum('row', 'column') 
flexWrap enum('wrap', 'nowrap') 
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') 
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') 

字体相关属性

color 字体颜色
fontFamily 字体族
fontSize 字体大小
fontStyle 字体样式,正常,倾斜等,值为enum('normal', 'italic')
fontWeight 字体粗细,值为enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing 字符间隔
lineHeight 行高
textAlign 字体对齐方式,值为enum("auto", 'left', 'right', 'center', 'justify')
textDecorationLine 貌似没效果,字体修饰,上划线,下划线,删除线,无修饰,值为enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed') 貌似没效果,修饰的线的类型
textDecorationColor 貌似没效果,修饰的线的颜色
writingDirection enum("auto", 'ltr', 'rtl') 不知道什么属性,写作方向?从左到右?从右到左?

图片相关属性

resizeMode enum('cover', 'contain', 'stretch')
overflow enum('visible', 'hidden') 超出部分是否显示,hidden为隐藏
tintColor 着色,rgb字符串类型
opacity 透明度

其中resizeMode 中的三个属性,contain是指无论如何图片都包含在指定区域内,假设设置的宽度高度比图片大,则图片居中显示,否则,图片等比缩小显示

测试代码如下


var AwesomeProject = React.createClass({

  render: function() {
    return (
    <View style={styles.container}>
       <Image source={{uri:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'}} style={styles.img}></Image>
    </View>
    );
  },
});

var styles = StyleSheet.create({
  container:{
    backgroundColor:'#ff0'//黄色
  },
  img:{
    flex:1,
    height:150,
    resizeMode:"contain"
  },

});

效果图如下图显示

这里写图片描述

将高度改成50,则进行缩小

这里写图片描述

cover是指按实际大小进行显示,超出部分进行裁剪,将属性值改成cover之后的效果图如下

这里写图片描述

stretch是指将图像进行拉伸显示,将属性值改为stretch后的效果如下图所示

这里写图片描述

图像变换

scaleX:水平方向缩放
scaleY:垂直方向缩放
rotation:旋转
translateX:水平方向平移
translateY:水平方向平移

阴影

shadowColor
shadowOffset
shadowOpacity
shadowRadius
2017-03-10 14:11:09 sinat_17775997 阅读数 1304

React-Native的基本控件属性方法

对React-Native的学习,从熟悉基本控件开始。http://www.cnblogs.com/Sweet-Candy/p/5695389.html

View

属性方法

序号 名称 属性Or方法 类型 说明

1

accessibilityLabel 属性 string  

2

accessible

属性

bool

当为true时,表示该元素是可以进行访问,

 

默认情况下所有可触摸的元素控件都是可以访问的

3

onAccessibilityTap 方法

function

该当accessible为true的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势

4

onLayout 方法

function

当组件的布局发生变动的时候,会自动调用下面的方法

 

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

该事件当重新计算布局的时候会立即进行触发,不过界面可能不会立即刷新,

特别当布局动画正在加载中的时候。

5

onMagicTap 方法

function

当accessible为true的时候,当用户双指点击(Magic Tap)的时候,进行触发

风格样式

在React Native中的Style风格布局,其实和CSS样式有很多相似的地方,这边介绍一下:

Style标签 说明  Style标签 说明
FlexBox 弹性布局(详细点击了解)

transforms

动画属性(详细点击了解)
backfaceVisibility enum('visible', 'hidden')定义界面翻转的

 

时候是否可见

backgroundColor 背景颜色
borderColor 边框颜色,这边几个就是代表上下左右变宽的颜色borderTopColor,borderRightColor,

 

borderBottomColor,borderLeftColor

borderRadius 边框圆角大小,其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,

 

borderBottomLeftRadius,borderBottomRightRadius

borderStyle 边框线的风格,这个和CSS样式一样的

 

,enum('solid', 'dotted', 'dashed')

borderWidth 边框宽度,另外四个是上下左右的边框宽度:borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth
opacity 设置透明度 overflow 设置内容超过容器显示还是隐藏
elevation 高度,设置Z轴,可以产生立体效果    

下面是几个特殊的属性,这边直接介绍所有平台通用以及只在Android平台有效果的属性

①.testID  (全平台)

可以根据该testID在测试的时候定位该View

②:accessibilityComponentType(android平台)

定义是否该UI组件和原生组件一致化处理

③.accessibilityLiveRegion  enum('none','polite','assertive')  (android平台)

该当View发生更新时候的,是否需要通过用户,不过该只对Android4.4以及以上的平台设备有效果

④.collapsable (android平台)

布局合并优化使用

⑤.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平台)

设置视图响应事件等级

⑥.needsOffscreenAlphaCompositing  (android平台)

设置View是否需要渲染和半透明度效果处理的先后次序。

⑦.renderToHardwareTextureAndroid  (android)

设置是否需要GPU进行渲染

 

 

Text

属性方法(主要一些可用的属性)
①.allowFontScaling (bool):控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用
②.numberOfLines (number):进行设置Text显示文本的行数,如果显示的内容超过了行数,默认其他多余的信息就不会显示了。
③.onLayout (function) 当布局位置发生变动的时候自动进行触发该方法, 其中该function的参数如下:
[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]
④.onPress (fcuntion) 该方法当文本发生点击的时候调用该方法.

风格样式

1..继承可以使用View组件的所有Style(具体查看http://facebook.github.io/react-native/docs/view.html#style)
2.color:字体颜色
3..fontFamily 字体名称
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')

 

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地址或者一个本地的路径

样式风格

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(完全不透明)

 

TextInput

属性方法(这边讲解平台公用以及Android生效的属性方法)
3.1.View 支持View的相关属性
3.2.autoCapitalize  控制TextInput输入的字符进行切换成大写(可选择参数:'none', 'sentences', 'words', 'characters')

  • none:不自动切换任何字符成大写
  • sentences:默认每个句子的首字母变成大写
  • words:每个单词的首字母变成大写
  • characters:每个字母全部变成大写

3.3.autoCorrect  bool  设置拼写自动修正功能 默认为开启(true)
3.4.autoFocus bool  设置是否默认获取到焦点默认为关闭(false)。该需要componentDidMount方法被调用之后才会获取焦点哦(componentDidMount是React组件被渲染之后React主动回调的方法)
3.5.defaultValue  string 给文本输入设置一个默认初始值。
3.6.editable bool  设置文本框是否可以编辑 默认值为true,可以进行编辑
3.7.keyboardType  键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。鉴于平台的原因如下的值是所有平台都可以进行通用的

  • default
  • numeric            数字键盘
  • email-address  邮箱地址

3.8.maxLength  number  可以限制文本输入框最大的输入字符长度
3.9.multiline bool  设置可以输入多行文字,默认为false(表示无论文本输入多少,都是单行显示)
3.10.onBlur  function 监听方法,文本框失去焦点回调方法
3.11.onChange function 监听方法,文本框内容发生改变回调方法
3.12.onChangeText  function监听方法,文本框内容发生改变回调方法,该方法会进行传递文本内容
3.13.onEndEditing  function监听方法,当文本结束文本输入回调方法
3.14.onFocus  function 监听方法  文本框获取到焦点回调方法
3.15.onLayout  function监听方法  组价布局发生变化的时候调用,调用方法参数为 {x,y,width,height}
3.16.onSubmitEditing function监听方法,当编辑提交的时候回调方法。不过如果multiline={true}的时候,该属性就不生效
3.17.placeholder string 当文本输入框还没有任何输入的时候,默认显示信息,当有输入的时候该值会被清除
3.18.placeholderText Color  string 设置默认信息颜色(placeholder)
3.19.secureTextEntry  bool 设置是否为密码安全输入框 ,默认为false
3.20.style 风格属性  可以参考Text组件风格
3.21.value  string 输入框中的内容值
以上是一些Android,iOS平台通用的属性,下面根据官网的文档,我这边组要讲解一下适用于Android平台的属性方法
3.22.numberOfLines number设置文本输入框行数,该需要首先设置multiline为true,设置TextInput为多行文本。
3.23.textAlign 设置文本横向布局方式 可选参数('start', 'center', 'end')
3.24.textAlignVertical 设置文本垂直方向布局方式 可选参数('top', 'center', 'bottom')
3.25.underlineColorAndroid  设置文本输入框下划线的颜色

 

ProgressBarAndroid

属性方法

3.1.支持View控件的属性方法 (这些属性是从View控件中继承下来)  例如:大小,布局,边距啊

3.2.color  设置进度的颜色属性值

3.3.indeterminate 设置是否要显示一个默认的进度信息,该如果styleAttr的风格设置成Horizontal的时候该值必须设置成false

3.4.progress  number  设置当前的加载进度值(该值在0-1之间)

3.5.styleAttr    进度条框的风格 ,可以取的值如下:

  • Horizontal
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

 

Navigator

  • Navigator.SceneConfigs.PushFromRight (默认)
  • Navigator.SceneConfigs.FloatFromRight
  • Navigator.SceneConfigs.FloatFromLeft
  • Navigator.SceneConfigs.FloatFromBottom
  • Navigator.SceneConfigs.FloatFromBottomAndroid
  • Navigator.SceneConfigs.FadeAndroid
  • Navigator.SceneConfigs.HorizontalSwipeJump
  • Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
  • Navigator.SceneConfigs.VerticalUpSwipeJump
  • Navigator.SceneConfigs.VerticalDownSwipeJump

 

ScrollView

属性方法

3.1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

3.2.contentContainerStyle  样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图。

3.3.horizontal   表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动

3.4.keyboardDismissMode   枚举类型表示键盘隐藏类型,可选值('none', "interactive", 'on-drag')  三个值的意义分别如下:

  • none  默认值,表示在进行拖拽滑动的时候不隐藏键盘
  • on-drag   表示在进行拖拽滑动开始的时候隐藏键盘
  • interactive  表示当拖拽触摸移动的同时隐藏键盘,向上拖拽的时候取消隐藏。不过在Android平台上面该选项不支持,所以会和'none'一样的效果。

3.5.keyboardShouldPersistTaps  该属性默认为false,表示如果当前是textinput控件,并且键盘是弹出状态的话,点击textinput之外地方,会进行隐藏键盘。反之不会有效果,键盘还是成打开状态。

3.6.onContentSizeChange  function  该当滚动视图的内容尺寸大小发生变化的时候进行调用

3.7.onScroll  function  该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。

3.8.refreshControl   element 设置元素控件,该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.

3.9.removeClippedSubviews  测试属性 当该值为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除,该设置可以提高滚动的性能。

3.10.showsHorizontalScrollIndicator   该值设置是否需要显示横向滚动指示条

3.11.showsVerticalScrollIndicator 该值设置是否需要显示纵向滚动指示条

3.12.sendMomentumEvents   当ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法设置,该sendMomentumEvents值设置为true的时候。变化的事件信息会通过该Android框架自动发送出来,然后之前设置的方法进行捕捉。

 

ToolbarAndroid

属性方法 

3.1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

3.2.actions 设置功能列表信息属性 传入的参数信息为: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]   进行设置功能菜单中的可用的相关功能。该会在显示在组件的右侧(显示方式为图标或者文字),如果界面上面区域已经放不下了,该会加入到隐藏的菜单中(弹出进行显示)。该属性的值是一组对象数组,每一个对象包括以下以下一些参数:

  • title: 必须的,该功能的标题
  • icon: 功能的图标  采用该代码进行获取 require('./some_icon.png')
  • show: 该设置图标直接显示,还是隐藏或者显示在弹出菜单中。always代表总是显示,ifRoom代表如果Bar中控件够进行显示,或者never代表使用直接不显示
  • showWithText  boolean 进行设置图标旁边是否要显示标题信息

3.3.contentInSetEnd  number 该用于设置ToolBar的右边和屏幕的右边缘的间距。

3.4.contentInsetStart number 该用于设置ToolBar的左边和屏幕的左边缘的间距。

3.5.logo  optionalImageSource  可选图片资源  用于设置Toolbar的Logo图标

3.6.navIcon optionalImageSource 可选图片资源 用于设置导航图标

3.7.onActionSelected function方法 当我们的功能被选中的时候回调方法。该方法只会传入唯一一个参数:点击功能在功能列表中的索引信息

3.8.onIconClicked function 当图标被选中的时候回调方法

3.9.overflowIcon  optionalImageSource 可选图片资源 设置功能列表中弹出菜单中的图标

3.10. rtl   设置toolbar中的功能顺序是从右到左(RTL:Right To Left)。为了让该效果生效,你必须在Android应用中的AndroidMainifest.xml中的application节点中添加android:supportsRtl="true",然后在你的主Activity(例如:MainActivity)的onCreate方法中调用如下代码:setLayoutDirection(LayoutDirection.RTL)。

3.11.subtitle  string 设置toolbar的副标题

3.12.subtitleColor  color  设置设置toolbar的副标题颜色

3.13.title string  设置toolbar标题

3.14.titleColor color 设置toolbar的标题颜色

 

Switch

属性方法

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • disabled bool 如果该值为true,用户就无法点击switch开关控件,默认为false
  • onValueChange function 方法,当该组件的状态值发生变化的时候回调方法
  • value bool 该开关的值,如果该值为true的时候,开关呈打开状态,默认为false

Picker

属性方法

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • onValueChange  function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数

    itemValue:该属性值为被选中的item的属性值

    itemPosition:该选择器被选中的item的索引position

  • selectedValue: any任何参数值,选择器选中的item所对应的值,该可以是一个字符串或者一个数字
  • style pickerStyleType 该传入style样式,设置picker的样式风格
  • enabled bool 如果该值为false,picker就无法被点击选中。例如:用户无法进行做出选择
  • mode enum ('dialog','dropdown')  选择器模式。在Android平台上面,设置mode可以控制用户点击picker弹出的样式风格

    'dialog': 该值为默认值,进行弹出一个模态dialog(弹出框)

    'dropdown':以picker视图为基础,在该视图下面弹出下拉框

  • prompt string  设置picker的提示语(标题),在Android平台上面,模式设置成'dialog',显示弹出框的标题

ViewPagerAndroid

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • initialPage  number  ViewPagerAndroid初始索引页,不过我们可以使用setPage方法来更新页码,通过onPageSelected方法来监听页面滑动。
  • keyboardDismissMode  enum('none','on-drag')  枚举类型,进行设置在拖拽滑动的过程中是否要显示键盘。

    'none'  默认值,在拖拽中不隐藏键盘

    'on-drag'   当拖拽滑动开始的时候隐藏键盘

  • onPageScroll  function 方法,该方法在页面进行滑动的时候执行(不管是因为页面滑动动画原因还是由于页面之间的拖拽以及滑动原因).该会回调传入的event.nativeEvent对象会有携带如下参数:

    'position'   从左起开始第一个可见的页面的索引

    'offset'  该value值的范围为[0,1),该用来代表当前页面的却换的状态。值x代表该索引页面(1-x)的范围可见,另外x范围代表下一个页面可见的区域

  • onPageScrollStateChanged  function 该回调方法会在页面滚动状态发生变化的时候进行调用。页面的滚动状态有下面三种情况:

    'idle' 该表示当前用户和页面滚动没有任何交互

    'dragging'  拖动中,该表示当前页面正在被拖拽滑动中

    'settling'   该表示存在页面拖拽或者滑动的交互。页面滚动正在结束。并且正在关闭或者打开动画。

  • onPageSelected  function 方法 该在页面进行拖拽滑动切换完成之后回调。该方法回调参数中的event.nativeEvent对象会携带如下一个属性 : 'position'  该属性代表当前选中的页面的索引.

 

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

属性方法

  • accessibilityComponentType   View.AccessibilityComponentType  设置可访问的组件类型
  • accessibilityTraits View.AccessibilityTraits,[View.AccessibilityTraits] 设置访问特征
  • accessible  bool  设置当前组件是否可以访问
  • delayLongPress  number  设置延迟的时间,单位为毫秒。从onPressIn方法开始,到onLongPress被调用这一段时间
  • delayPressIn  number 设置延迟的时间,单位为毫秒,从用户触摸控件开始到onPressIn被调用这一段时间
  • delayPressOut  number 设置延迟的时间,单位为毫秒,从用户触摸事件释放开始到onPressOut被调用这一段时间
  • onLayout  function  当组件加载或者改组件的布局发生变化的时候调用。调用传入的参数为{nativeEvent:{layout:{x,y,width,height}}}
  • onLongPress function 方法,当用户长时间按压组件(长按效果)的时候调用该方法
  • onPress function 方法 当用户点击的时候调用(触摸结束)。 但是如果事件被取消了就不会调用。(例如:当前被滑动事件所替代)
  • onPressIn  function  用户开始触摸组件回调方法
  • onPressOut function 用户完成触摸组件之后回调方法
  • pressRetentionOffset {top:number,left:number,bottom:number,right:number}   该设置当视图滚动禁用的情况下,可以定义当手指距离组件的距离。当大于该距离该组件会失去响应。当少于该距离的时候,该组件会重新进行响应。

ListView

属性方法

  • ScrollView相关属性样式全部继承
  • dataSource   ListViewDataSource  设置ListView的数据源
  • initialListSize  number  进行设置ListView组件刚刚加载的时候渲染的列表行数,用这个属性确定首屏或者首页加载的数量,而不是花大量的时间渲染加载很多页面数据,提高性能
  • onChangeVisibleRows  function  (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。visibleRows参数对所有可见的行为{selectionID:{rowId:true}}的形式,changedRow参数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见,false代表在视图之外不可见的行。
  • onEndReachedThreshold  number 当偏移量达到设置的临界值调用onEndReached
  • onEndReached function 方法,当所有的数据项行被渲染之后,并且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过参数的形式)。
  • pageSize   number 每一次事件的循环渲染的行数
  • removeClippedSubviews  bool  该属性用于提供大数据列表的滚动性能。该使用的时候需要给每一行(row)的布局添加over:'hidden'样式。该属性默认是开启状态。
  • renderFooter function 方法  ()=>renderable ,在每次渲染过程中头和尾总会重新进行渲染。如果发现该重新绘制的性能开销比较大的时候,可以使用StaticContainer容器或者其他合适的组件。在每一次渲染过程中Footer(尾)该会一直在列表的底部,header(头)该会一直在列表的头部
  • renderHeader  function 方法 使用情况和上面的renderFooter差不多
  • renderRow function 方法   (rowData,sectionID,rowID,highlightRow)=>renderable   该方法有四个参数,其中分别为数据源中一条数据,分组的ID,行的ID,以及标记是否是高亮选中的状态信息。
  • renderScrollComponent function 方法 (props)=>renderable  该方法可以返回一个可以滚动的组件。默认该会返回一个ScrollView
  • renderSectionHeader function (sectionData,sectionID)=>renderable   如果设置了该方法,这样会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候,该会处于对应的内容的顶部,然后开始滑动的时候,该会跑到屏幕的顶端。直到滑动到下一个section的header(头)视图,然后被替代为止。
  • renderSeparator function  (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果设置该方法,会在被每一行的下面渲染一个组件作为分隔。除了每一个section分组的头部视图前面的最后一行。
  • scrollRenderAheadDistance number  进行设置当该行进入屏幕多少像素以内之后就开始渲染该行

 

Cilpboard

使用范例:

复制代码
  async _setClipboardContent(){

    Clipboard.setString('Hello World');
    try {
      var content = await Clipboard.getString();
      ToastAndroid.show('粘贴板的内容为:'+content,ToastAndroid.SHORT);
    } catch (e) {
      ToastAndroid.show(e.message,ToastAndroid.SHORT);
    }
  }
复制代码

 

 

DatePickerAndroid

1.Promise<Object> open(options:Object)   staitc,静态方法,使用该方法进行加载弹出一个标准的Android时间日期选择器。该options(可选)参数有以下三种对象:

①:'date'   日期Date对象或者时间戳以毫秒单位-日期已默认格式显示

②:'minDate'  日期Date对象或者时间戳以毫秒单位-可以选择的最小时间

③:'maxDate' 日期Date对象或者时间戳以毫秒单位-可以选择的最大时间

options = {date: this.state.maxDate,maxDate:new Date()}

2.dateSetAction() ,static静态方法,选择时间日期选择器

3.dismissedAction(),static静态方法,关闭时间日期选择器

复制代码
  async showPicker(stateKey, options) {

    try {
      var newState = {};
      const {action, year, month, day} = await DatePickerAndroid.open(options);     
      if (action === DatePickerAndroid.dismissedAction) {
        newState[stateKey + 'Text'] = 'dismissed';
      } else {
        var date = new Date(year, month, day);
        newState[stateKey + 'Text'] = date.toLocaleDateString();
        newState[stateKey + 'Date'] = date;
      }
      this.setState(newState);
    } catch ({code, message}) {
      console.warn(`Error in example '${stateKey}': `, message);
    }
  }
复制代码
2018-07-06 15:44:29 qq_38719039 阅读数 1495

react key概述

key的作用

react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。

简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。例如下面代码:

//this.state.users内容
this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <div>
    <h3>用户列表</h3>
    {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
  </div>
 )
);

上面代码在dom渲染挂载后,用户列表只有张三李四两个用户,王五并没有展示处理,主要是因为react根据key认为李四王五是同一个组件,导致第一个被渲染,后续的会被丢弃掉。

这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。

  • key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。

  • key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件。

另外需要指明的是:

key不是用来提升react的性能的,不过用好key对性能是有帮组的。

应该知道React使用virtual dom来比较UI状态的变化,如果DOM中的某一节点更新时重新渲染,一样的话就不渲染。key属性的作用就在与解决渲染List的这种难题,简单来说,例如你有一个List:

<li>Orange</li> <li>Banana</li>

如果想更新成

<li>Apple</li> <li>Orange</li>

那dom比较算法就可以有多种选择,例如销毁两个,生成两个新的代替,或者销毁banana,在orange前插入apple等等,当list多的时候情况就比较复杂,所以React为了使得Dom比较算法最快,需要你提供给每一个list元素一个特殊的key,这样就容易比较前后两个大型的List了,帮助React如何移动、替代、销毁、插入节点,例如

let List = this.props.fruits.map((fruit) => {
            return <FruitList key={fruit.id}
                              name={fruit.name}
                    />
         });
 
return (
    <div>
        {List}
    </div>

2018-01-22 16:53:04 qq_39711712 阅读数 3902

Warning:Each child in an array or iterator should have a unique “key” prop.

解决方法:在数组名.map等循环子项中添加key属性

array.map((value, index) => {
    return (
        <View key={value.toString()}>//循环子项加key
        < DeviceView
            img={require('../resources/images/ic_storage.png')}
            header={this.sdName[index]}
            body={value}
        />
            <View style={styles.itemDividerView}>
                <View style={styles.itemDivider}/>
            </View>
        </View>
    )
})

2016-08-23 20:23:28 qq_25280063 阅读数 840

  Props

属性传递,单向。
        每一个组件都有可变与不可变的属性,props就是不可变的属性,当props改变时,组件的绘制方法不会被调用

一般性我们自定义原生UI组件,或者拿几个View,Text拼装成一个新View的时候,可以用到,举个例子:
<span>	</span>const props = {
      		item_text : this.state.item_text,
      		item_image : this.state.item_image,
    		};
	<CustomButton text={"hello world!"} {...props}/>


我们在CustomButton可以使用this.props.text

state

          state就是组件的可变属性,state的改变会触发组件的render函数,react与其他mvvm框架的最大的不同点就是,react可以想象成状态机,状态的改变会重绘UI,然后根据dom diff算法来绘制UI,而其他的mvvm框架则是对js对象的dirty check(Angulars)或者defineProperty时指定的回调函数(Emberjs),因此,状态机制与dom diff的存在声称React更快。  React靠一个state来维护状态,当state发生变化则更新Dom

refs

          refs这个点主要用在上级组件调用下级组件的场景

componentDidMount

          组件UI渲染完毕后调用,常用在这种业务场景,调用ajax获得数据后,渲染UI

React Native周期

<span>	</span>componentWillMount     //最初渲染之前调用
<span>	</span>componentDidMount      //渲染结束后调用一次

<span>	</span>componentWillReceiveProps     //在component接收到新的参数前调用
<span>	</span>shouldComponentUpdate         //每次重新触发渲染之前调用
                                  nextProps     //下一个状态的参数
                                  nextState     //下一个状态对象
<span>	</span>componentWillUpdate    //重新渲染之前调用
<span>	</span>componentDidUpdate     //从新渲染结束后调用

<span>	</span>componentWillUnmount   //在被删除之前调用