ios 在 React Native 中获取视图的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30203154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get size of a View in React Native
提问by Matthew
Is it possible to get the size (width and height) of a certain view? For example, I have a view showing the progress:
是否可以获取某个视图的大小（宽度和高度）？例如，我有一个显示进度的视图：
<View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}} />
I need to know the actual width of the view to align other views properly. Is this possible?
我需要知道视图的实际宽度才能正确对齐其他视图。这可能吗？
回答by ide
As of React Native 0.4.2, View components have an onLayoutprop. Pass in a function that takes an event object. The event's nativeEventcontains the view's layout.
从 React Native 0.4.2 开始， View 组件有一个onLayoutprop。传入一个接受事件对象的函数。事件nativeEvent包含视图的布局。
<View onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
}} />
The onLayouthandler will also be invoked whenever the view is resized.
该onLayout处理器也将被调用每当视图大小。
The main caveat is that the onLayouthandler is first invoked one frame after your component has mounted, so you may want to hide your UI until you have computed your layout.
主要的警告是onLayout在您的组件安装后的一帧首先调用处理程序，因此您可能希望隐藏您的 UI，直到您计算出您的布局。
回答by Abhishek Kumar
This is the only thing that worked for me:
这是唯一对我有用的东西：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class Comp extends Component {
find_dimesions(layout){
const {x, y, width, height} = layout;
console.warn(x);
console.warn(y);
console.warn(width);
console.warn(height);
}
render() {
return (
<View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Comp', () => Comp);
回答by Bruno Guerra
You can directly use the Dimensionsmodule and calc your views sizes.
Actually, Dimensionsgive to you the main window sizes.
您可以直接使用该Dimensions模块并计算您的视图大小。实际上，Dimensions给你主窗口的大小。
import { Dimensions } from 'Dimensions';
Dimensions.get('window').height;
Dimensions.get('window').width;
Hope to help you!
希望能帮到你！
Update: Today using native StyleSheetwith Flexarranging on your views help to write clean code with elegant layout solutions in wide cases instead computing your view sizes...
更新：今天使用本机StyleSheet和Flex在您的视图上排列有助于在广泛的情况下使用优雅的布局解决方案编写干净的代码，而不是计算您的视图大小......
Although building a custom grid components, which responds to main window resize events, could produce a good solution in simple widget components
尽管构建一个响应主窗口调整大小事件的自定义网格组件可以在简单的小部件组件中产生一个很好的解决方案
回答by juslintek
Basically if you want to set size and make it change then set it to state on layout like this:
基本上，如果您想设置大小并进行更改，则将其设置为在布局上的状态，如下所示：
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow',
},
View1: {
flex: 2,
margin: 10,
backgroundColor: 'red',
elevation: 1,
},
View2: {
position: 'absolute',
backgroundColor: 'orange',
zIndex: 3,
elevation: 3,
},
View3: {
flex: 3,
backgroundColor: 'green',
elevation: 2,
},
Text: {
fontSize: 25,
margin: 20,
color: 'white',
},
});
class Example extends Component {
constructor(props) {
super(props);
this.state = {
view2LayoutProps: {
left: 0,
top: 0,
width: 50,
height: 50,
}
};
}
onLayout(event) {
const {x, y, height, width} = event.nativeEvent.layout;
const newHeight = this.state.view2LayoutProps.height + 1;
const newLayout = {
height: newHeight ,
width: width,
left: x,
top: y,
};
this.setState({ view2LayoutProps: newLayout });
}
render() {
return (
<View style={styles.container}>
<View style={styles.View1}>
<Text>{this.state.view2LayoutProps.height}</Text>
</View>
<View onLayout={(event) => this.onLayout(event)}
style={[styles.View2, this.state.view2LayoutProps]} />
<View style={styles.View3} />
</View>
);
}
}
AppRegistry.registerComponent(Example);
You can create many more variation of how it should be modified, by using this in another component which has Another view as wrapper and create an onResponderRelease callback, which could pass the touch event location into the state, which could be then passed to child component as property, which could override onLayout updated state, by placing {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}and so on.
您可以通过在另一个具有另一个视图作为包装器的组件中使用它来创建更多的修改方式，并创建一个 onResponderRelease 回调，该回调可以将触摸事件位置传递给状态，然后可以将其传递给子组件作为属性，它可以通过放置{[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}等方式覆盖 onLayout 更新状态。
回答by Yinfeng
Maybe you can use measure:
也许你可以使用measure：
measureProgressBar() {
this.refs.welcome.measure(this.logProgressBarLayout);
},
logProgressBarLayout(ox, oy, width, height, px, py) {
console.log("ox: " + ox);
console.log("oy: " + oy);
console.log("width: " + width);
console.log("height: " + height);
console.log("px: " + px);
console.log("py: " + py);
}
回答by pinchez254
for me setting the Dimensions to use % is what worked for me
width:'100%'
对我来说，将 Dimensions 设置为使用 % 对我有用
width:'100%'
回答by ravi
Here is the code to get the Dimensions of the complete view of the device.
这是获取设备完整视图尺寸的代码。
var windowSize = Dimensions.get("window");
var windowSize = Dimensions.get("window");
Use it like this:
像这样使用它：
width=windowSize.width,heigth=windowSize.width/0.565
width=windowSize.width,heigth=windowSize.width/0.565
