Obtener el tamaño de una vista en React Native

¿Es posible obtener el tamaño (ancho y alto) de una vista determinada? Por ejemplo, tengo una vista que muestra el progreso:

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

Necesito saber el ancho real de la vista para alinear otras vistas correctamente. es posible?

A partir de React Native 0.4.2, los componentes View tienen un onLayoutaccesorio . Pase una función que tome un objeto de evento. El evento nativeEventcontiene el diseño de la vista.

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

El onLayoutcontrolador también se invocará cada vez que se cambie el tamaño de la vista.

La advertencia principal es que el onLayoutcontrolador se invoca primero un cuadro después de que se haya montado su componente, por lo que es posible que desee ocultar su interfaz de usuario hasta que haya calculado su diseño.

Esto es lo único que funcionó para mí:

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

Básicamente, si desea establecer el tamaño y hacer que cambie, configúrelo en un estado como este:

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

Puede crear muchas más variaciones de cómo debería modificarse, al usar esto en otro componente que tiene Otra vista como contenedor y crear una devolución de llamada onResponderRelease, que podría pasar la ubicación del evento táctil al estado, que luego podría pasar al componente secundario como propiedad, que podría anular el estado actualizado onLayout, colocando {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}y así sucesivamente.

Puede usar directamente el Dimensionsmódulo y calcular los tamaños de sus vistas. En realidad, le Dimensionsdan los tamaños de las ventanas principales.

import { Dimensions } from 'Dimensions';

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

Espero poder ayudarte!

Actualización : Hoy, usar nativo StyleSheetcon Flex organizando sus vistas ayuda a escribir código limpio con soluciones de diseño elegantes en casos amplios en lugar de calcular los tamaños de sus vistas ...

Si bien la creación de componentes de cuadrícula personalizados , que responden a los eventos de cambio de tamaño de la ventana principal, podría producir una buena solución en componentes de widget simples

Quizás puedas usar 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);
}

para mí, configurar las Dimensiones para usar% es lo que funcionó para mí width:'100%'

Aquí está el código para obtener las Dimensiones de la vista completa del dispositivo.

var windowSize = Dimensions.get("window");

Úselo así:

width=windowSize.width,heigth=windowSize.width/0.565