Native组件系列,决定当组件尺寸和图片尺寸不成

onResponderMove function

二、View

属性:
accessible:表示此视图时一个启用了无障碍功能的元素。默认为true
onMagicTap:当accessible为true时,双击View会调用此函数。
onMoveShouldSetResponder:触摸控件并滑动时调用的方法
onMoveShouldSetResponderCapture:触摸控件并滑动时调用的方法,避免子视图响应
onResponderMove:用户在View上移动手指调用
onResponderRelease:结束触摸时调用
pointerEvents:控制当前视图是否可以触控'box-none', 'none', 'box-only', 'auto'

样式:
width:宽度
height:高度
backgroundColor:背景颜色
backfaceVisibility:是否显示翻转'visible','hidden'
borderColor:边框颜色
borderWidth:边框宽度
borderRadius:边框圆角半径
borderStyle:边框样式'solid'实线,'dotted'点, 'dashed'虚线
borderTopColor:上边框颜色
borderTopWidth:上边框宽度
borderTopLeftRadius:左上角边框圆角的半径
borderTopRightRadius:右上角边框圆角的半径
overflow:内容超过容器时超出显示还是隐藏'visible', 'hidden'
opacity:透明度

View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用,我们推荐使用StyleSheet,这样的话,代码在结构上会更加的清晰、也有利于后期维护。

相关文章
React Native探索系列
React Native组件系列

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

borderRightWidth

一、ImageView

1、设置图片的显示方式

resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') 

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。

contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白

stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。

repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。

center:居中不拉伸。

属性:
accessible:表示此视图时一个启用了无障碍功能的元素。默认为true
onMagicTap:当accessible为true时,双击View会调用此函数。
onMoveShouldSetResponder:触摸控件并滑动时调用的方法
onMoveShouldSetResponderCapture:触摸控件并滑动时调用的方法,避免子视图响应
onResponderMove:用户在View上移动手指调用
onResponderRelease:结束触摸时调用
pointerEvents:控制当前视图是否可以触控'box-none', 'none', 'box-only', 'auto'

View组件中常见的属性

Transforms 动画属性
backfaceVisibility enum('visible', 'hidden') 定义界面翻转的时候是否可见
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 设置透明度,取值从0-1;
overflow enum('visible', 'hidden') 设置内容超出容器部分是显示还是隐藏;
elevation number 高度 设置Z轴,可产生立体效果。

2.6 overflow (iOS)

overflow取值为enum('visible', 'hidden')。它用来定义当View组件的子组件的宽高超过View组件宽高时的行为,默认值为hidden,即隐藏超出的部分。overflow只在iOS平台有效,在Android平台即使设置overflow为visible,呈现的还会是hidden的效果。

}

Transforms... 动画

<View style={{flexDirection: 'row', height: 100, padding: 20}}> 
  <View style={{backgroundColor: 'blue', flex: 0.3}} /> 
  <View style={{backgroundColor: 'red', flex: 0.5}} /> 
  <MyCustomComponent {...customProps} />
</View>

3.2 pointerEvents

pointerEvents的取值为enum('box-none', 'none', 'box-only', 'auto') 。它用来控制当前视图是否可以作为触控事件的目标。
在开发中,很多组件是被布局到手机界面上的,其中一些组件会遮盖住它的位置下方的组件,有一些场景需要被遮盖住的组件来处理事件。比如一个地图组件上覆盖了一个图像组件用来显示信息,但是我们不想这个图像组件影响用户的手指拖动地图的操作,这时就可以使用图像组件从View组件继承得到的pointerEvents属性来解决这个问题。
pointerEvents的取值含义如下所示:

  • none:组件自身不能作为触控事件的目标,交由父组件处理。
  • box-none:组件自身不能作为触控事件的目标,但其子组件可以。
  • box-only:组件自身可以作为触控事件的目标,但其子组件不能。
  • auto:组件可以作为触控事件的目标。

ToolbarAndroid

removeClippedSubviewsbool

作为创建UI时最基础的组件,View是一个支持Flexbox布局、样式、一些触摸处理和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上,View都会直接对应一个平台的原生视图,无论它是UIView、<div>还是android.view。

**2.8 opacity **

opacity 的取值为0到1,当值为0时,表示组件完全透明,而值为1时,则表示组件完全不透明。

ScrollView

这个事件会在布局计算完成后立即调用一次,不过收到此事件时新的布局可能还没有在屏幕上呈现,尤其是一个布局动画正在进行中的时候。

2.style属性

style属性作为组件属性中的一种,它包含了多种属性,这里对它们意义进行讲解。

Switch

borderBottomWidth

1.概述

View组件是RN中最基本的组件,绝大部分的组件都继承了View组件的属性,所以学习其他组件前,要首先掌握View组件。
View组件是一个支持Flexbox布局、样式、一些触摸处理的容器,它可以放到其它的组件里,也可以有任意多个任意类型的子组件。View组件对应着多个平台的视图,比如Android的View以及iOS的UIView。
由于View组件的属性非常多,这里主要介绍一些常用的属性。

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

作为创建UI时最基础的组件,View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上,View都会直接对应一个平台的原生视图,无论它是UIView、还是android.view.View。

前言

了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。

TextInput

accessible 当此属性为true时,表示此视图时一个启用了无障碍功能的元素。默认情况下,所有可触摸操作的元素都是无障碍功能元素。

3.1 触摸事件回调函数

触摸事件回调函数用来处理用户的触摸屏幕操作,一般情况下,触摸事件都是在其他组件中完成的。关于触摸事件是一个比较大的知识点,这里只介绍这些触摸事件回调函数的作用。

  • onStartShouldSetResponder: 触摸事件为touchDown时,是否申请成为事件响应者,接收触摸事件。如果返回true,则表示组件需要成为事件响应者。
  • onStartShouldSetResponderCapture:触摸事件为touchDown时,是否要拦截此事件,阻止子组件接收该事件,如果返回true,则表示要进行拦截。
  • onMoveShouldSetResponder : 触摸事件为TouchMove时,是否申请成为事件响应者,接收触摸事件。如果返回true,则表示组件需要成为事件响应者。
  • onMoveShouldSetResponderCapture :触摸事件为TouchMove时,是否要拦截此事件,阻止子组件接收该事件。
  • onResponderGrant: 申请成为事件响应者成功,组件开始接收触摸事件 。
  • onResponderReject: 申请成为事件响应者失败,其他组件正在进行事件处理 。
  • onResponderMove:触摸手指移动的事件(TouchMove)。
  • onResponderTerminationRequest:在组件成为事件响应者期间,其他组件申请成为响应者,返回为true,则表示同意释放响应者角色。
  • onResponderTerminate:如果组件释放响应者角色,会回调该函数,通知组件事件响应处理被终止了。这个回调也会发生在系统直接终止组件的事件处理,例如用户在触摸操作过程中,突然来电话的情况。
  • onResponderRelease:表示触摸完成(touchUp)的时候的回调,表示用户完成了本次的触摸交互。

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

onAccessibilityTap function#

2.7 backgroundColor

backgroundColor取值为string。它用来设定背景颜色,默认的颜色为非常浅的灰色,只有Text和TextInput组件继承了父组件的背景颜色,其他的组件都要设置自己的背影颜色。

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

3.1基本属性

2.5 transform

transform的取值为:

[{perspective: number}, 
{rotate: string},
{rotateX: string},
{rotateY: string},
{rotateZ: string},
{scale: number},
{scaleX: number}, 
{scaleY: number},
{translateX: number},
{translateY: number}, 
{skewX: string},
{skewY: string}]

transform的取值总的来说,共分为四种类型:translate、scale、rotate和skew,分别用来设置View组件的平移、缩放、旋转和倾斜。
View组件用transform属性的效果不是很明显,绝大部分组件都继承了View组件的transform属性,比如Text。我们改写2.4小节中的例子,将textStyle改为如下代码:

textStyle: {
        fontSize: 20,
        transform: [{rotate: '40deg'}, {scale: 0.9}, {translateY: 10}]
    }

运行效果如下:

对于translate、scale、rotate的效果,Android开发者会非常熟悉,那么rotate和skew有什么区别呢?再来修改textStyle:

textStyle: {
        fontSize: 20,
        transform:[{skewY:'40deg'}]
    }

运行效果如下:

从两个图的效果可以看出,rotate和skew的区别就是:rotate在旋转的同时,不会改变Text组件的形态,而skew则随着倾斜角度的改变,Text组件的形态也会发生相应的变化。如果我们加大skew的倾斜角度,比如60deg,Text组件的形态则会变为下图的效果。

QQ图片20170625175751.jpg

;)

opacitynumber

2.3 elevation (Android)

elevation取值为number。Android平台没有shadow来设置阴影,但是,可以用elevation属性来间接的设置阴影。它使用Android原生的 elevation API来设置组件的高度,这样就会在界面上呈现出阴影的效果,此属性仅支持Android 5.0及以上版本。

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';
class ViewApp extends Component {
    render() {
        return (
             <View style={{flex: 1, justifyContent: 'center',
                   alignItems:'center',backgroundColor:'white'}}>
                   <View style={styles.shadow}/>
             </View>
        );
    }
}
const styles = StyleSheet.create({
    shadow: {
        height: 120,
        width: 120,
        backgroundColor: 'black',
        elevation: 20,
        shadowOffset: {width: 0, height: 0},
        shadowColor: 'black',
        shadowOpacity: 1,
        shadowRadius: 5
    }
});
AppRegistry.registerComponent('ViewSample', () => ViewApp);

在iOS平台运行如上代码,效果为:

在Android平台运行效果则为:

很明显,elevation的效果远远不及shadow,这时我们可以采用第三方库react-native-shadow。

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

borderBottomColor

2.4 border相关

borderStyle的取值为 enum('solid', 'dotted', 'dashed'),用来设置边框的风格,三个值分别对应着实线边框、点状边框和虚线边框,默认值为solid。
除了可以设置边框的风格,还可以用定义边框的颜色和边框的圆角。边框的颜色设置有borderColor、borderTopColor 、borderRightColor 、borderBottomColor 、borderLeftColor,取值都为string,通常情况下用borderColor就足够了。
边框的圆角设置有borderRadius 、borderTopLeftRadius 、borderTopRightRadius 、borderBottomLeftRadius 、borderBottomRightRadius,取值为number。

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text} from 'react-native';
class ViewApp extends Component {
    render() {
        return (
            <View style={styles.viewStyle}>
                <View style={styles.viewTextStyle}>
                    <Text style={styles.textStyle}>border</Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    viewTextStyle: {
        justifyContent: 'center',
        alignItems:'center',
        width: 80,
        height: 50,
        borderWidth:1,
        borderStyle:'dashed',
        borderRadius:10,
        borderColor:'red'
    },
    textStyle: {
        fontSize: 20
    }
});
AppRegistry.registerComponent('ViewSample', () => ViewApp);

上面的例子用到了border相关的属性。需要注意的是,如果不设置borderRadius,borderStyle的dotted和dashed的取值会无效,效果如下图所示。

QQ图片20170625164633.jpg

words:每个单词的首字母变成大写

auto:视图可以作为触控事件的目标。

3.4 动画相关

needsOffscreenAlphaCompositing (Android)
needsOffscreenAlphaCompositing的取值为bool,是Android平台独有的属性。它用来决定视图是否要先离屏渲染再进行半透明度处理,来确保颜色和混合效果正确。为了正确的显示透明表现而进行离屏渲染会带来极大的开销,对于非原生开发者来说很难调试,因此,它的默认值为false。

renderToHardwareTextureAndroid (Android)
renderToHardwareTextureAndroid的取值为bool,同样是是Android平台独有的属性。它用来决定视图是否要把它本身(以及所有的子视图)渲染到一个GPU上的硬件纹理中。
在Android平台上,这对于只修改透明度、旋转、位移和缩放的动画和交互是很有用的:视图不必每次都重新绘制,显示列表也不需要重新执行,纹理可以被重用于不同的参数。负面作用是这会大量消耗显存,所以当交互/动画结束后应该把此属性设置回false。

shouldRasterizeIOS (iOS)
shouldRasterizeIOS的取值为bool,是iOS平台独有的属性。它决定视图是否需要在被混合之前绘制到一个位图上。
这对于动画和交互来说是有很有用的,它不会修改这个组件的尺寸和它的子组件。举例来说,当我们移动一个静态视图的位置的时候,栅格化允许渲染器重用静态视图的缓存位图,并快速合成。
栅格化会导致离屏的绘图传递,位图会消耗内存。所以使用此属性需要进行充分的测试和评估。

还有一些View属性这里没有给出,比如RN为了方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档。

参考资料
官方文档
《React Native跨平台移动应用开发》第二版
React Native 中如何给 Navigator 添加一条合格的阴影
React Native 触摸事件处理详解
React Native中pointerEvent属性

我的新书《Android进阶之光》已出版,查看详情点击这。
欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。

delayPressOut  number 设置延迟的时间,单位为毫秒,从用户触摸事件释放开始到onPressOut被调用这一段时间

onResponderTerminate function

2.1 Flexbox

View组件的Flexbox属性这里就不再介绍了,详细请看React Native探索(四)Flexbox布局详解这一篇文章。正是因为View组件提供了Flexbox属性,因此,继承了View组件的其他组件也都具有Flexbox属性。

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

borderTopWidth

3.属性

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

borderTopRightRadius

2.2 shadow相关 (iOS)

View组件提供了四种阴影属性如下表:

样式名 参数属性 说明
shadowColor color 设置阴影颜色
shadowOffset {width: number, height: number} 设置阴影位移值
shadowOpacity number 设置阴影透明度
shadowRadius number 设置阴影模糊半径

设置View组件的阴影属性并没有什么意义,在View组件中定义这些样式是为了让继承它的组件去各自实现这些效果,比如Text组件。需要注意的是只有iOS平台能使用shadow属性。

3.18.placeholderText Color  string 设置默认信息颜色(placeholder)

onMoveShouldSetResponder function

3.3 removeClippedSubviews

removeClippedSubviews的取值为bool。它的一个特殊的与性能优化相关的属性,通常在ListView和ScrollView中使用,当组件有很多子组件不在屏幕显示范围时,可以将removeClippedSubviews设置为true,允许释放不在显示范围子组件,从而优化了性能。需要注意的是,要想让此属性生效,要确保overflow属性为默认的hidden。

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

borderRightColor

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

三。属性

accessibilityComponentType   View.AccessibilityComponentType  设置可访问的组件类型

ShadowPropTypesIOS#style...

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

borderTopLeftRadius

}catch({code, message}) {

borderLeftColor

on-drag   表示在进行拖拽滑动开始的时候隐藏键盘

borderLeftWidth

onLayout方法function

pointerEventsenum('box-none', 'none', 'box-only', 'auto')

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

当accessible为true时,如果用户做了一个双指轻触(Magic tap)手势,系统会调用此函数。

mode enum ('dialog','dropdown')  选择器模式。在Android平台上面,设置mode可以控制用户点击picker弹出的样式风格

box-none:视图自身不能作为触控事件的目标,但其子视图可以

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

当组件挂载或者布局变化的时候调用,参数为:

3.24.textAlignVertical 设置文本垂直方向布局方式 可选参数('top', 'center', 'bottom')

onLayout function

3.17.placeholder string 当文本输入框还没有任何输入的时候,默认显示信息,当有输入的时候该值会被清除

borderColor 边框颜色

onEndReachedThreshold  number 当偏移量达到设置的临界值调用onEndReached

borderTopColor

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

这是一个特殊的性能相关的属性,由RCTView导出。在制作滑动控件时,如果控件有很多不在屏幕内的子视图,会非常有用。

风格样式

3.2交互属性

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

onMoveShouldSetResponderCapture function

Navigator.SceneConfigs.FloatFromBottom

onResponderGrant function

[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]

none:视图不能作为触控事件的目标。

onPress function 方法 当用户点击的时候调用(触摸结束)。 但是如果事件被取消了就不会调用。(例如:当前被滑动事件所替代)

View与样式的关联分为内联式和外联式。View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。

②:accessibilityComponentType(android平台)

androidelevationnumber

3..fontFamily 字体名称

onResponderRelease function

LargeInverse

backgroundColor 背景颜色

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

onMagicTapfunction

initialListSize  number  进行设置ListView组件刚刚加载的时候渲染的列表行数,用这个属性确定首屏或者首页加载的数量,而不是花大量的时间渲染加载很多页面数据,提高性能

borderBottomRightRadius

3.19.secureTextEntry  bool 设置是否为密码安全输入框 ,默认为false

onStartShouldSetResponder function

none:不自动切换任何字符成大写

要让此属性生效,首先要求视图有很多超出范围的子视图,并且子视图和容器视图(或它的某个祖先视图)都应该有样式overflow: hidden。

elevation高度,设置Z轴,可以产生立体效果

borderBottomLeftRadius

}

borderWidth

newState[stateKey+ 'Text'] = 'dismissed';

backfaceVisibilityenum('visible', 'hidden')

3.25.underlineColorAndroid  设置文本输入框下划线的颜色

Flexbox... 弹性布局

3.9.multiline bool  设置可以输入多行文字,默认为false(表示无论文本输入多少,都是单行显示)

borderStyleenum('solid', 'dotted', 'dashed')

3.12.onChangeText  function监听方法,文本框内容发生改变回调方法,该方法会进行传递文本内容

borderRadius

initialPage  number  ViewPagerAndroid初始索引页,不过我们可以使用setPage方法来更新页码,通过onPageSelected方法来监听页面滑动。

onStartShouldSetResponderCapture function

console.warn(`Errorinexample '${stateKey}': `, message);

对于大部分的触摸处理,你只需要用TouchableHighlight或TouchableOpacity包装你的组件

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

onResponderTermination Requestfunction

风格样式

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

Navigator.SceneConfigs.FloatFromLeft

二。View与样式的关联

4.backgroundColor 背景颜色

一.View的作用:

3.11.onChange function 监听方法,文本框内容发生改变回调方法

onResponderReject function

show: 该设置图标直接显示,还是隐藏或者显示在弹出菜单中。always代表总是显示,ifRoom代表如果Bar中控件够进行显示,或者never代表使用直接不显示

当accessible为true时,如果用户对一个已选中的无障碍元素做了一个双击手势时,系统会调用此函数。(译注:此事件是针对残障人士,并非是一个普通的点击事件。如果要为View添加普通点击事件,请直接使用Touchable系列组件替代View,然后添加onPress函数)。

3.1.View 支持View的相关属性

本文由必威发布于必威-编程,转载请注明出处:Native组件系列,决定当组件尺寸和图片尺寸不成

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。