ReactNative样式及宽度和高度

【基础篇】ReactNative 样式及宽度和高度

ReactNative 中的样式

ReactNative 中的高度与宽度


ReactNative 中的样式

  • ReactNative 中的样式与CSS样式基本一致, 只是写法上有所区别而已

  • ReactNative 中所有核心组件有一个 style 属性, 它接收一个对象或数组,对象中是 小驼峰命名(第一个单词首字母小写,之后的其他单词首字母大写) 的样式属性而已;例如 background-color 改为 backgroundColor

  • ReactNative 中样式使用方法:使用 StyleSheet.create({})

    import { StyleSheet } from "react-native";
    
    const styles = StyleSheet.create({
        text: {
            color: "red",
            fontSize: 16,
        },
        bigText: {
            color: "blue",
            fontSize: 20,
            fontWeight: "blod",
        },
    });

-

ReactNative 中的高度与宽度

  • 想要取得组件在屏幕显示的尺寸,就需要使用到宽度和高度

  • ReactNative 中指定组件的尺寸,就是使用样式的宽高来实现的,即 widthheight 属性;

  • ReactNative 中所有的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点

  • 弹性(Flex)宽高

    • 在组件的样式中使用 flex 可以使其在可利用的空间中动态扩张或收缩
    • flex 的值越大, 占用的屏幕空间比例就越大
    • 组件能够撑满剩余空间的前提是:父组件的尺寸不能为零;如果父组件的尺寸没有指定,则子组件即使使用了 flex,也是无法显示的
    • 示例代码:
    import React from "react";
    import { View } from "react-native";
    
    const WidthAndHeightDemo = () => {
        return (
            <View>
                {/* <View>
                      <View style={{width: 100, height: 100, backgroundColor: 'powderblue'}} />
                      <View style={{width: 150, height: 150, backgroundColor: 'skyblue'}} />
                      <View style={{width: 200, height: 200, backgroundColor: 'steelblue'}} />
                  </View> */}
                {/* 以下方式,没有任何内容显示 */}
                {/* <View style={{flex: 1}}> */}
                {/* 以下方式,子组件才可以显示出来 */}
                <View style={{ height: 600 }}>
                    <View style={{ flex: 1, backgroundColor: "powderblue" }} />
                    <View style={{ flex: 2, backgroundColor: "skyblue" }} />
                    <View style={{ flex: 3, backgroundColor: "steelblue" }} />
                </View>
            </View>
        );
    };
    
    export default WidthAndHeightDemo;

    -


  转载请注明:

文章作者: Diviner
文章链接: http://www.diviner.site/archives/5471cdfc.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Divinerの博客 !

评论
 上一篇
ReactNative中使用Flexbox布局 ReactNative中使用Flexbox布局
【基础篇】ReactNative 中使用 Flexbox 布局Flexbox 布局简单介绍 Flexbox 布局常用的属性 Flexbox 布局参考文章 Flexbox 布局简单介绍 flex 属性决定元素在主轴上如何 填满 整个可用
下一篇 
ReactNative属性(props)和状态(state) ReactNative属性(props)和状态(state)
【基础篇】ReactNative 属性(props)和状态(state)Props 属性 State 状态 Props 属性通常情况下, 我们创建一个组件时回定制我们需要的参数,而这些参数就称为属性(Props)接下来,我们使用 &l
  目录