React Native开发React Native开发经验集

React-Native基本控件备忘录

2017-11-17  本文已影响127人  小朱v

最近在研究React-Native，把该配置的环境都配置了一遍，HelloWorld跑起来了之后，
现在开始学习、熟悉基本控件了，并记录保存下来，以备随时查找。

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')

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就是弹出数字键盘。鉴于平台的原因如下的值是所有平台都可以进行通用的

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 进度条框的风格 ，可以取的值如下:

Navigator

ScrollView

属性方法

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

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

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

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

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}] 进行设置功能菜单中的可用的相关功能。该会在显示在组件的右侧(显示方式为图标或者文字)，如果界面上面区域已经放不下了，该会加入到隐藏的菜单中(弹出进行显示)。该属性的值是一组对象数组，每一个对象包括以下以下一些参数:

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

属性方法

Picker

属性方法

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

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

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

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

ViewPagerAndroid

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

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

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

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

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

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

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

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

属性方法

ListView

属性方法

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);
    }
  }
上一篇 下一篇

猜你喜欢

热点阅读