在React Native中获取视图的大小

是否有可能获得某个视图的大小（宽度和高度）？ 例如，我有一个看法，显示进展：

<View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}} /> 

我需要知道视图的实际宽度以正确alignment其他视图。 这可能吗？

Answer 1

从React Native 0.4.2开始，View组件有一个onLayout prop 。 传入一个需要事件对象的函数。 事件的nativeEvent包含视图的布局。

 <View onLayout={(event) => { var {x, y, width, height} = event.nativeEvent.layout; }} /> 

onLayout处理程序也将在视图resize时调用。

主要的注意事项是onLayout处理程序首先被调用一个框架，你的组件已经挂载，所以你可能想要隐藏你的用户界面，直到你已经计算出你的布局。

Answer 2

您可以直接使用Dimensions模块并计算您的视图大小。 实际上， Dimensions给你的主要窗口尺寸。

 import Dimensions from 'Dimensions'; Dimensions.get('window').height; Dimensions.get('window').width; 

希望能帮到你！

Answer 3

也许你可以使用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); } 

Answer 4

这是唯一对我有用的东西：

 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); 

Answer 5

基本上，如果你想设置大小，使其改变，然后将其设置为像这样布局状态：

 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); 

您可以创build更多的变体，通过在另一个包含另一个视图的组件中创build更多的变体，并创build一个onResponderReleasecallback，该callback可以将触摸事件的位置传递给状态，然后传递给子组件作为属性，可以通过放置{[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}等来覆盖onLayout更新的状态。