https://www.cnblogs.com/zhiyingzhou/p/7471212.html

https://blog.csdn.net/calvin_zhou/article/details/78415524

通过获取灰色 bar 的宽度,算橙色 bar 的宽度(右边数字其实应该是  3/4)

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native'; export default class JinDuTiao extends Component { constructor(props) {
super(props);
this.state = {}
}

  
  //获取底层灰色bar的宽度
_onLayout(event) {
let { width } = event.nativeEvent.layout;
this.setState({
barWidth: width
})
} render() {
return ( <View style={styles.barBox}>
<View style={{ flex: 4 }}>
<View>
<View style={styles.bar} onLayout={(e) => { this._onLayout(e) }} />
<View style={[styles.bar, {
backgroundColor: "#f8b62b",
position: "absolute",
width: this.state.barWidth * (3 / 4)
}]} />
</View>
</View>
<View style={{ flex: 1 }}>
<View style={styles.classTimeBox}>
<Text>3/4</Text>
</View>
</View>
</View> )
}
} const styles = StyleSheet.create({ classTimeBox: {
flexDirection: "row",
alignSelf: 'flex-end',
alignItems: 'flex-end'
},
barBox: {
marginTop: 9,
flexDirection: "row",
alignItems: 'center',
},
bar: {
paddingRight: 10,
height: 6,
borderRadius: 3,
backgroundColor: '#eeeeee',
zIndex: 1,
},
});

RN 获取组件的宽度和高度的更多相关文章

  1. react-native 获取组件的宽度和高度

    react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...

  2. android之获取屏幕的宽度和高度

    获取屏幕的宽度和高度: 方法一: //获取屏幕的宽度 public static int getScreenWidth(Context context) { WindowManager manager ...

  3. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  4. Android 开发 Activity里获取View的宽度和高度 转载

    原文地址:https://blog.csdn.net/chenbaige/article/details/77991594 前言: 可能很多情况下,我们都会有在activity中获取view 的尺寸大 ...

  5. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  6. js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度

    html部分 <div class="form-group col-md-12"> <label class="col-md-2 text-right& ...

  7. 如何在onCreate方法中获取视图的宽度和高度

    你可以通过视图的getWidth()和getHeight()来获取视图的宽度和高度. 但是,可能会让你失望的是,如果你直接在onCreate方法内调用这两个函数,你会的到0. 为什么呢? 这是因为,当 ...

  8. php获取设备的宽度和高度

    php获取设备的宽度和高度 如果前台没有传输当前请求的宽度和高度,我们有时候需要用php借助javascript获取屏幕的宽和高,以控制现实的样式. 代码如下: <?php /* * 获取设备宽 ...

  9. Java 获取屏幕的宽度和高度

    获取屏幕的宽度和高度 1 import java.awt.Dimension; 2 import java.awt.Toolkit; 3 4 public class Main { 5 6 publi ...

随机推荐

  1. 使用Bash Bunny从被锁定的系统抓取登陆凭据

    在今年早些时候,FB就对Bash Bunny做了相关的报导.这款号称“世界上最先进的USB攻击工具”的Bash Bunny,是否真的像其所说的一样是款渗透神器呢?下面,我将通过实例演示如何利用Bash ...

  2. 高性能JavaScript(1)

    ---------------------------------------------------------------------------------------------------- ...

  3. JAVA字符串的常见处理和操作

    1.纯数字字符串补0为指定位,格式化输出(例如00482这样) 使用String.format处理: int mNumber = 1; // 0 代表前面补充0 // 4 代表长度为4 // d 代表 ...

  4. C#获取当前日期时间

    我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...

  5. mysql navcate longblob 查询结果导出倒入

    由于之前项目为了查询方便,且不受权限控制.所以把image储存在了数据库.但是也遇到了很多瓶颈问题. 1,丢图从日志上查询获知,丢图95%以上是由于mysql的timeout时间失效引起的.(由于另一 ...

  6. learn-ES6基础语法1-let&const

    1.let ① 使用let声明的变量,所声明的变量只能在命令所在的代码块内有效. 同样在代码块内的a和c,c在代码块内就可以输出,a在代码块外就找不到了. ② 使用let命令声明的变量在域解析的时候不 ...

  7. MySQL-8.0.11与Navicat Premium安装教程

    1. 下载MySQL 下载地址: https:////dev.mysql.com/downloads/mysql/ 百度云 链接:https://pan.baidu.com/s/1bxAtnvChZZ ...

  8. linux btrfs文件系统管理与应用

    btrfs文件系统管理与应用 1.btrfs文件系统 基本介绍 btrfs文件系统在CentOS7.x上属于技术预览版 btrfs文件系统英文名:B-tree  FileSystem或者Butter ...

  9. CentOS7装好了开始装wrf了

    1. 安装PGI编译器 下载地址:https://www.pgroup.com/products/community.htm(pgi官网社区版) 下载完将其复制到虚拟机内: 补充一下 我是在home ...

  10. APP测试常用工具以及框架

    APP测试常用工具以及框架 1)纯白盒方式的测试,Monkey.一般是开发用的比较多,动手能力强的同学可以自己去尝试下! 2)偏白盒的robotium,这家伙号称是黑盒,但是本人不太认同- 因为使用r ...