从零学React Native之07View

Z时代
2024-01-10
分类：综合

react

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

View组件的颜色和边框

backgroundColor 键用来指定颜色. RN 0.19版本开始,只有Text和TextInput组件会继承父组件的背景颜色

Opacity键定义了View组件的透明度, 取值0-1, 0表示完全透明

borderStyle键用来设置边框的风格,只能取值solid, dotted和dashed三个值之一,分别表示实线边框,点状边框和虚线边框, 默认值是solid

边框颜色borderColor, 当然也可以拆分指定四个边的颜色,如: borderTopColor

圆角边框 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组件的视觉效果

shadowColor,shadowOffset,shadowOpacity,shadowRadius是与阴影相关的样式键,分别对应着组件的阴影颜色,阴影位移值,阴影透明度与阴影圆角率.

overflow键有两个字符串类型的取值:visible和hidden。它定义了当View组件中的子组件宽高超出View组件宽高时的行为. 默认是hidden,即超出部分隐藏. 这个键只针对ios平台有效,在Android平台上永远为hidden效果.

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倍
    }
});...