Ottieni le dimensioni di una vista in React Native

È possibile ottenere le dimensioni (larghezza e altezza) di una determinata vista? Ad esempio, ho una vista che mostra l'avanzamento:

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

Devo conoscere la larghezza effettiva della vista per allineare correttamente le altre viste. È possibile?

A partire da React Native 0.4.2, i componenti di visualizzazione hanno un onLayoutprop . Passa una funzione che accetta un oggetto evento. L'evento nativeEventcontiene il layout della vista.

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

Il onLayoutgestore verrà inoltre richiamato ogni volta che la vista viene ridimensionata.

L'avvertenza principale è che il onLayoutgestore viene prima invocato un frame dopo che il componente è stato montato, quindi potresti voler nascondere la tua interfaccia utente fino a quando non hai calcolato il layout.

Questa è l'unica cosa che ha funzionato per 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);

Fondamentalmente se si desidera impostare le dimensioni e modificarlo, impostarlo in modo che sia come segue:

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

È possibile creare molte più varianti di come dovrebbe essere modificato, utilizzandolo in un altro componente che ha un'altra vista come wrapper e creare un callback onResponderRelease, che potrebbe passare la posizione dell'evento touch nello stato, che potrebbe quindi essere passata al componente figlio come proprietà, che potrebbe sovrascrivere lo stato aggiornato di onLayout, posizionando {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}e così via.

È possibile utilizzare direttamente il Dimensionsmodulo e calcolare le dimensioni delle visualizzazioni. In realtà, ti Dimensionsdarò le dimensioni della finestra principale.

import { Dimensions } from 'Dimensions';

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

Spero di aiutarti!

Aggiornamento : oggi l'utilizzo nativo StyleSheetcon Flex che organizza le tue viste aiuta a scrivere codice pulito con eleganti soluzioni di layout in grandi casi invece di calcolare le dimensioni delle tue viste ...

Sebbene la creazione di una griglia personalizzata componenti , che risponde agli eventi di ridimensionamento della finestra principale, possa produrre una buona soluzione in semplici componenti widget

Forse puoi usare 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);
}

per me impostare le dimensioni per usare% è ciò che ha funzionato per me width:'100%'

Ecco il codice per ottenere le dimensioni della vista completa del dispositivo.

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

Usalo in questo modo:

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