RN 获取组件的宽度和高度
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 获取组件的宽度和高度的更多相关文章
- react-native 获取组件的宽度和高度
react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...
- android之获取屏幕的宽度和高度
获取屏幕的宽度和高度: 方法一: //获取屏幕的宽度 public static int getScreenWidth(Context context) { WindowManager manager ...
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- Android 开发 Activity里获取View的宽度和高度 转载
原文地址:https://blog.csdn.net/chenbaige/article/details/77991594 前言: 可能很多情况下,我们都会有在activity中获取view 的尺寸大 ...
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
- js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度
html部分 <div class="form-group col-md-12"> <label class="col-md-2 text-right& ...
- 如何在onCreate方法中获取视图的宽度和高度
你可以通过视图的getWidth()和getHeight()来获取视图的宽度和高度. 但是,可能会让你失望的是,如果你直接在onCreate方法内调用这两个函数,你会的到0. 为什么呢? 这是因为,当 ...
- php获取设备的宽度和高度
php获取设备的宽度和高度 如果前台没有传输当前请求的宽度和高度,我们有时候需要用php借助javascript获取屏幕的宽和高,以控制现实的样式. 代码如下: <?php /* * 获取设备宽 ...
- Java 获取屏幕的宽度和高度
获取屏幕的宽度和高度 1 import java.awt.Dimension; 2 import java.awt.Toolkit; 3 4 public class Main { 5 6 publi ...
随机推荐
- double 四舍五入保留一定的位数
/** * double 类型的 四舍五入 保留一定的位数 * @param value * @param decimal 保留的位数 * @return * @throws Exception */ ...
- java对excel操作
package test; import jxl.*; import jxl.Cell; import java.io.*; /** * 读取excel */ public class TestExc ...
- python基础—字典的使用{}_多级字典嵌套
shpping_catalog = { 'food':{ 'fish':['delisious','aaaa'], 'meat':['oil','bbbb'], 'fruit':['fresh','c ...
- C# array与arraylist区别及获取sql字段名
array与arraylist的区别: 1. Array 的容量是固定的,而 ArrayList 的容量是根据需要自动扩展的.如果更改了 ArrayList.Capacity 属性的值,则自动进行内 ...
- Java中语法与C/CPP的区别
static不能在成员方法中定义,只能作为类变量定义.
- MAC 终端上传代码到Github 或者 Gitlab
1.创建远程仓库. Project name:项目名称 Project description (optional):项目介绍 Visibility Level :项目的访问权限 2.创建完成后操作, ...
- 前端axios下载excel(二进制)
需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...
- CF867E: Buy Low Sell High(贪心, STL) (hdu6438)
Description 有nn个城市,第ii个城市商品价格为aiai,从11城市出发依次经过这nn个城市到达n n城市,在每个城市可以把手头商品出售也可以至多买一个商品,问最大收益. Input 第 ...
- c# 获取某进程占用的内存(任务管理器显示的内存一致)
最近写了看门狗的winform程序,需求要求显示监测的进程所占的内存大小 找了好几个方法,都和任务管理器显示的内存不一致 最后找到了一个解决方法 PerformanceCounter pf1 = ne ...
- 配置https and http2 local本地开发环境
今天,几乎所有你访问的网站都是受HTTPS保护的.如果你还没有这样做,是时候这样做了.使用HTTPS保护您的服务器也就意味着您无法从非HTTPS的服务器发送请求到此服务器.这对使用本地开发环境的开发人 ...