Uzyskaj rozmiar widoku w React Native

Czy można uzyskać rozmiar (szerokość i wysokość) określonego widoku? Na przykład mam widok pokazujący postęp:

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

Muszę znać rzeczywistą szerokość widoku, aby prawidłowo wyrównać inne widoki. czy to możliwe?

Począwszy od React Native 0.4.2, zobacz komponenty mają onLayoutrekwizyt . Przekaż funkcję, która przyjmuje obiekt zdarzenia. Wydarzenie nativeEventzawiera układ widoku.

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

Procedura onLayoutobsługi będzie również wywoływana za każdym razem, gdy rozmiar widoku zostanie zmieniony.

Głównym zastrzeżeniem jest to, że program onLayoutobsługi jest najpierw wywoływany jedną klatkę po zamontowaniu komponentu, więc możesz chcieć ukryć interfejs użytkownika, dopóki nie obliczysz układu.

To jedyna rzecz, która zadziałała dla mnie:

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

Zasadniczo, jeśli chcesz ustawić rozmiar i zmienić go, ustaw go na stan w układzie w następujący sposób:

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

Możesz stworzyć o wiele więcej wariantów tego, jak powinno być zmodyfikowane, używając tego w innym komponencie, który ma inny widok jako opakowanie i utworzyć wywołanie zwrotne onResponderRelease, które może przekazać lokalizację zdarzenia dotyku do stanu, który może być następnie przekazany do komponentu podrzędnego jako właściwość, która może przesłonić zaktualizowany stan onLayout przez umieszczenie {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}i tak dalej.

Możesz bezpośrednio skorzystać z Dimensionsmodułu i obliczyć rozmiary swoich widoków. Właściwie to Dimensionspodaj główne rozmiary okien.

import { Dimensions } from 'Dimensions';

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

Mam nadzieję, że ci pomogę!

Aktualizacja : Dzisiaj korzystam StyleSheetz natywnych z Flex rozmieszczeniem w widokach pomaga pisać czysty kod z eleganckimi rozwiązaniami układu w szerokich przypadkach zamiast obliczać rozmiary widoków ...

Chociaż tworzenie niestandardowych komponentów siatki , które reagują na zdarzenia zmiany rozmiaru okna głównego, może dać dobre rozwiązanie w przypadku prostych komponentów widgetów

Może możesz użyć 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);
}

dla mnie ustawienie wymiarów na użycie% działa dla mnie width:'100%'

Oto kod, aby uzyskać wymiary pełnego widoku urządzenia.

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

Użyj tego w ten sposób:

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