从零学React Native之07View

View 组件是React Native最基本的组件.绝大部分其他React Native 组件.

View组件的颜色和边框

1. backgroundColor 键用来指定颜色. RN 0.19版本开始,只有Text和TextInput组件会继承父组件的背景颜色
2. Opacity键定义了View组件的透明度, 取值0-1, 0表示完全透明
3. borderStyle键用来设置边框的风格,只能取值solid, dotted和dashed三个值之一,分别表示实线边框,点状边框和虚线边框, 默认值是solid
4. 边框颜色borderColor, 当然也可以拆分指定四个边的颜色,如: borderTopColor
5. 圆角边框 borderRadius,也可以分别单独设置四个角, 如左上角borderTopLeftRadius.
   如果一个View宽高相等,值为2X, 将borderRadius的值设为X时,这个View显示上会是一个圆, 这个用法比较有用

来看看示例代码:

...
class AwesomeProject extends Component {
    render() {
        return (
            //根View
            <View style={styles.container}>
                <View style={styles.view1}
                      opacity={0.5}/>
                <View style={styles.view2}
                      opacity={1}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {   //根View样式
        flex: 1,
        justifyContent:'space-around',// 子组件分散排列
        alignItems:'center',
        backgroundColor:'white'
    },
    view1:{
        width:50,
        height:50,
        borderWidth:1,
        borderColor:'green',
        borderRadius:25,
        backgroundColor:'red'
    },
    view2:{
        width:50,
        height:50,
        borderWidth:2,
        borderColor:'green',
        borderRadius:25,
        backgroundColor:'red'
    }
});
...

运行结果:

运行结果

View组件的视觉效果

1. shadowColor,shadowOffset,shadowOpacity,shadowRadius是与阴影相关的样式键,分别对应着组件的阴影颜色,阴影位移值,阴影透明度与阴影圆角率.
2. overflow键有两个字符串类型的取值:visible和hidden。它定义了当View组件中的子组件宽高超出View组件宽高时的行为. 默认是hidden,即超出部分隐藏. 这个键只针对ios平台有效,在Android平台上永远为hidden效果.
3. elevation是Android平台特有的样式键.数值类型,通过在组件周围渲染阴影让用户产生一种组件悬浮在手机屏幕上的视觉效果.

View组件的变形

开发者可以利用transform样式键设置实现组件的变形,从而实现文字或图像的变形.变形包括: translate(平移) ,scale(缩放) , rotate(旋转) , skew(倾斜)四种类型.

transform样式键设置的格式是:

transform:
    [
        {perspective: number},
        {rotate: string},
        {rotateX:string},
        {rotateY: string},
        {scale: number},
        {scaleX: number},
        {scaleY: number},
        {translateX: number},
        {translateY: number}, 
        {skewX: string},
        {skewY: string}     
    ]

rotate控制目标整体旋转,于目标内部形状无关,目标内部不发生任何形变,而skew目标内部的形状会随倾斜而改变.
perspective元素与3D变形效果有关.

示例代码:

...
class AwesomeProject extends Component {
    render() {
        return (
            //根View
            <View style={styles.container}>
                <Text style={styles.text1}>
                    第一个Text
                </Text>
                <Text style={styles.text2}>
                    第二个Text
                </Text>
                <Text style={styles.text3}>
                    第三个Text
                </Text>
                <Text style={styles.text4}>
                    第四个Text
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {   //根View样式
        flex: 1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#F5FCFF'
    },
    text1:{
        flex: 1,
        alignItems:'center',
        justifyContent:'center',
        transform:[{rotate:'45deg'}]  // 旋转45度
    },
    text2:{
        flex: 1,
        alignItems:'center',
        justifyContent:'center',
        transform:[{rotateX:'45deg'},{scale:2}]   //x轴旋转45度 放大2倍
    },
    text3:{
        flex: 1,
        alignItems:'center',
        justifyContent:'center',
        transform:[{skewY:'45deg'}]   //Y轴倾斜45度
    },
    text4:{
        flex: 1,
        alignItems:'center',
        justifyContent:'center',
        transform:[{scale:2},{translateX:50}]  //X轴平移50 放大2倍
    }
});
...

运行结果:

回调函数

A组件有一个属性B的值是函数的引用,当某一个事件发生时,React Native框架通过这个属性的值回调这个函数, 为了简洁, 我们直接将提供的函数称为A组件的回调函数，这个属性B称为回调函数类型的属性, 比如我们之前接触过的 onPress 属性就是这样.

1. onLayout是View组件的回调函数, 当View组件被加载或者布局改变时,调用
2. onTouchStart, onTouchMove, onTouchEnd 分别在开始触摸事件,触摸点移动和触摸结束时调用, 都会收到一个event对象参数， 在event对象结构中是:

{
      timeStamp : aNumber,  //时间戳 , 1970年1月1日至今的毫秒数
      nativeEvent: {
            locationX: aNumber,
            locationY: aNumber
      }
}

其他属性

View的属性还有很多, 比如 pointerEvents属性, 大家可以参考我的另一篇文章React Native中pointerEvent属性

更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。

likeDev.jpg