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. 集合List的排序

    自从出现了泛型和LINQ,对于集合的排序变得更简单了. //倒序 list.OrderByDescending(p=> p.a).ThenByDescending(p => p.b); / ...

  2. JS调用本地设备

    JS 允许通过 navigator.mediaDevices.getUserMedia(options) 直接调用本地的设备,比如麦克风,摄像头等.因为该操作涉及到用户隐私,所以调用的时候会弹框请求权 ...

  3. python vtk 通过回调函数监测键盘”Up”键动作,每按一次方向上键,actor变换一种颜色

    import vtk class KeyPressInteractorStyle(vtk.vtkInteractorStyleTrackballCamera): def __init__(self,p ...

  4. AVL Tree Insertion

    Overview AVL tree is a special binary search tree, by definition, any node, its left tree height and ...

  5. pytorch查看模型weight与grad

    在用pdb debug的时候,有时候需要看一下特定layer的权重以及相应的梯度信息,如何查看呢? 1. 首先把你的模型打印出来,像这样 2. 然后观察到model下面有module的key,modu ...

  6. 【EMV L2】Application Usage Control

    [Application Usage Control] Tag9F07,卡片数据,2bytes: Indicates issuer’s specified restrictions on the ge ...

  7. Android应用程序启动过程

    有没有想过,当我们点击桌面应用程序图标是怎样打开APP启动应用程序的呢? 当我们点击应用图标会调用Launcher的startActivitySafely()方法,方法实现如下,其实是调用的start ...

  8. 使用日期操作类(Calendar)获得几秒、几分钟、几小时之前的时间

    public String dealDate(String case_time){ // 日期操作类 Calendar calendar = Calendar.getInstance(); // 当前 ...

  9. CentOS7.4部署Python3+Django+uWSGI+Nginx

    CentOS7.4部署Python3+Django+uWSGI+Nginx http://www.showerlee.com/archives/2590

  10. 多系统引导 Grub

    目录 1. 多系统引导程序 1.1 简介 1.2 Grub History 1.3 支持Windows系统下安装的grub版本 1.4多系统引导程序对比: 1.5 相关参考 1.5.1 Grub 2 ...