您的位置: 首页  >  文章  >  React Native 基础之 View 组件

React Native 基础之 View 组件

分类: 文章 • 2023-04-08 10:27:18

View 其实就是 UI 最基础的组件，跟我们 Android 中的 View 不同，它更像我们 Android 中的 LinearLayout，RN 中的 View 是一个支持 Flexbox 布局、样式、一些触摸处理和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上， View 都会直接对应一个平台的原生视图，无论它是 UIView、div 还是 android.view.View。

1. Style

1.1 Flexbox

因为 View 组件提供了 Flexbox 属性，因此，继承了 View 组件的其他组件也都具有 Flexbox 属性。

1.2 shadow相关 (iOS)

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

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

1.3 elevation (Android)

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

import React, {Component} from 'react';
import {
  StyleSheet, 
  Text, 
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.shadow}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  shadow: {
    height: 120,
    width: 120,
    backgroundColor: 'blue',
    elevation: 20,
    shadowOffset: {width: 0, height: 0},
    shadowColor: 'black',
    shadowOpacity: 1,
    shadowRadius: 5
  }
});

效果图：
React Native 基础之 View 组件
React Native 基础之 View 组件
很明显，elevation 的阴影效果远远不及 shadow，这时我们可以采用第三方库 react-native-shadow。

1.4 border相关

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

import React, {Component} from 'react';
import {
  StyleSheet, 
  Text, 
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.borderView}>
          <Text style = {styles.text}>border</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  borderView: {
    height: 50,
    width: 80,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderRadius: 10,
    borderColor: 'green'
  },
  text: {
    fontSize: 20,
    color: 'red'
  }
});

效果图：
React Native 基础之 View 组件

1.5 transform

transform的取值为：

name type
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 组件的平移、缩放、旋转和倾斜。
实例代码：

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

效果图：
React Native 基础之 View 组件

1.6 overflow (iOS)

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

1.7 backgroundColor

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

1.8 opacity

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

2. 属性

2.1 触摸事件回调函数

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

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

2.2 pointerEvents

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

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

2.3 removeClippedSubviews

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

2.4 动画相关

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

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

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

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

相关推荐