ReactNative样式及宽度和高度

  |     |   本文总阅读量:

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

ReactNative中的样式

ReactNative中的高度与宽度


ReactNative中的样式

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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,也是无法显示的

    • 示例代码:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      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;

赏作者一颗糖吧, 您的支持将鼓励我继续创作!



文章目录
  1. 1. 【基础篇】ReactNative样式及宽度和高度
    1. 1.0.1. ReactNative中的样式
    2. 1.0.2. ReactNative中的高度与宽度
您是第 位小伙伴 | 本站总访问量 | 已经写了 22.6k 字啦

载入天数...载入时分秒...