欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React Native 组件 View和StyleSheet

程序员文章站 2022-06-15 22:46:09
...
  • 常用基础组件
    • View
    • StyleSheet
    • Text
    • TextInput
    • Image
    • ListView
  • 交互组件
    • Button
    • TouchableOpacity
    • TouchableHighlight

View

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

class ViewPage extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: "row",
          height: 100,
          padding: 20
        }}
      >
        <View style={{ backgroundColor: "blue", flex: 0.3 }} />
        <View style={{ backgroundColor: "red", flex: 0.5 }} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

React Native 组件 View和StyleSheet

属性

  • style
    推荐使用StyleSheet来定义样式,尽管内联样式也同样可以使用。
属性 说明
width 宽度
backgroundColor 背景颜色
height 高度
边框相关 borderStyle 边框样式,[ 'solid' | 'dotted' | 'dashed' ] 对应实线、点、虚线,默认值为'solid'
borderColor 边框颜色,另外对应的有四个属性borderTopColor、borderBottomColor、borderLeftColor、borderRightColor,分别用于设置上、下、左、右边框的颜色
borderWidtn 边框宽度,同样有四个拆分的属性
borderRadius 边框圆角半径长度,有形如borderTopLeftRadius、borderBottomRightRadius的四个拆分属性,用于控制上左、下右等四个角的圆角半径。
opacity 透明度,取值从0到1,0为完全透明。
文字相关 color 字体颜色
fontSize 字体大小
fontWeight 粗体,[ 'normal' | 'bold' | 100 | 200 | 300 | … | 900 ]
fontStyle 斜体,[ 'normal' | 'italic' ]
fontFamily 字体
textAlign 文字对齐方式,[ 'left' | 'right' | 'center' | 'auto' ]
关于flexBox 因为 View 组件提供了 Flexbox 属性,因此,继承了 View 组件的其他组件也都具有 Flexbox 属性。
[参考资料:FlexBox布局在RN中的基本用法]
其他 如 lineHeight 行高,position 定位(top,left,right,bottom),margin,padding等,大体可以参照CSS。
[参考资料:React-Native样式表]
  • accessible
    布尔值,当为true时,表示该元素是可以进行访问,默认情况下所有可触摸的元素控件都是可以访问的。

事件

触摸事件回调函数用来处理用户的触摸屏幕操作,但一般情况下,触摸事件都是在"Touchable"开头的一系列组件中完成的。

  • onStartShouldSetResponder: (event) => [true|false]
    设置这个视图是否要响应触摸(touchDown)事件,返回值为true表示要响应
  • onStartShouldSetResponderCapture: (event) => [true|false]
    设置当有触摸(touchDown)事件发生时,是否要拦截此事件,阻止子组件接收该事件,如果返回 true,则表示要进行拦截。
  • onMoveShouldSetResponder: (event) => [true|false]
    设置这个视图是否要响应滑动(touchMove)事件,返回值为true表示要响应
  • onMoveShouldSetResponderCapture: (event) => [true|false]
    设置当有滑动(touchMove)事件发生时,是否要拦截此事件,阻止子组件接收该事件,如果返回 true,则表示要进行拦截。
  • onResponderMove: (event) => {}
    当用户正在屏幕上移动手指时调用这个函数。
  • onMagicTap:(event) => {}
    当accessible为true的时候,当用户双指点击(Magic Tap)的时候,进行触发
  • onResponderRelease: (event) => {}
    在整个触摸事件结束时调用这个函数。
  • onResponderTerminationRequest: (event) => [true|false]
    其他某个视图想要成为事件的响应者,并要求这个视图放弃对事件的响应时,就会调用这个函数。如果允许释放响应,就返回true。
  • onResponderTerminate: (event) => {}
    如果组件释放响应者角色(响应中断),会回调该函数,通知组件事件响应处理被终止了。例如使用onResponderTerminationRequest将响应者移交给其他视图,或者用户在触摸操作过程中,突然来电话等情况。

StyleSheet

StyleSheet 提供了一种类似 CSS 样式表的抽象。

创建一个样式表:

const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});

使用一个样式表:

//使用样式表
<View style={styles.container}></view>
//当需要设置多个属性类的时候,可以传入一个数组
<Text style={[styles.title, styles.activeTitle]} />
//在两个样式有冲突的情况下,以右边的值优先,有些情况下可以加一些条件判断样式是否加载,比如,
<View style={styles.container}>
  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
//也可以在组件中render样式,然而这种做法不推荐,其实就像一般html页面中行内样式不推荐一样
<Text style={[styles.title, {color:'blue', textAlign:'center'}]} />