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>
);
}
}
属性
-
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'}]} />