组件属性一

View

颜色与边框

backgroundColor: 背景颜色
opacity: 0~1透明度
borderStyle: 边框风格
- solid: default 实线边框
- dotted: 点状边框
- dashed: 虚线边框
borderColor: 边框颜色,可以单独定义上下左右
borderRadius: 定义圆角边框,可单独定义四个角

大部分组件继承了View的属性

视觉效果

阴影

shadowColor
shadowOffset
shadowOpacity
shadowRadius

overflow

取值为 visible和hidden(默认),定义子组件产出父组件部分的是否显示，当设置为visible时，仅对ios平台有效,显示超出父组件部分

elevation

Android平台特有效果,在组件周围渲染阴影

变形

利用transform设置组件的变形,包括translate平移,scale缩放,rotate旋转,skew倾斜

const styles = StyleSheet.create({
    view1Style: {
        ....
        transform: [{scale:2}, {rotateZ:"45deg"}]
    }
})
//Xdeg 表示角度 取值0-360

回调函数

回调函数命名 onB 即B事件发生的回调函数

onLayOut

当View组件被加载或者改变布局时

onTouchStart、onTouchMove、onTouchEnd

开始触摸事件、触摸点移动事件、触摸结束事件
三个回调函数带一个event参数,

//Event结构有用对象
{
 timeStamp: aNumber, //时间戳
 nativeEvent: {
    locationX: aNumber,
    locationY: aNumber,
 }
}

//示例 demo
constructor(props) {
        super(props)
        this._onTouchStart = this._onTouchStart.bind(this)
    }

    _onTouchStart(event) {
        console.log( event.nativeEvent.locationX)
    }

    render() {
        return(
            <View style={styles.containStyle}>
                <View style={styles.view1Style} onTouchStart={this._onTouchStart}>

                </View>
            </View>
        )
    }

removeClippedSubviews

布尔属性，与性能有关的，属性为true将允许释放不在显示范围内的子组件，需要将overflow设置为hidden才会生效

onLayOut

应用通过Dimension获取屏幕宽高，Dimensions.get('window').width/height,获取到的宽和高是实时屏幕的宽和高,当横置时宽大于高

pointEvents

在RN中触摸事件总是传递给最上层的组件，当被遮盖的组件需要向银行触摸事件，就需要从View继承的pointEvents

可以取值为none box-none box-only auto

none: 发生在本组件和子组件的触摸事件交给本组件的父组件处理
box-none: 本组件显示范围内，非子组件显示范围内的时间交给本组件父组件处理,子组件显示范围交给子组件处理
box-only: 本组件显示范围内的所有触摸事件都交给本组件处理
auto: 视组件不同而不同不是所有组件都支持box-none和box-only