web-dev-qa-db-fra.com

Obtenir la taille d'une vue dans React Native

Est-il possible d'obtenir la taille (largeur et hauteur) d'une vue donnée? Par exemple, j'ai une vue montrant l'état d'avancement:

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

J'ai besoin de connaître la largeur réelle de la vue pour aligner correctement les autres vues. Est-ce possible?

iosreact-native
113
Matthew

À partir de React Native 0.4.2, les composants View ont un onLayout prop . Transmettre une fonction qui prend un objet événement. La variable nativeEvent de l'événement contient la présentation de la vue.

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

Le gestionnaire onLayout sera également appelé chaque fois que la vue sera redimensionnée.

La mise en garde principale est que le gestionnaire onLayout est d'abord appelé une image après le montage de votre composant. Vous souhaiterez donc peut-être masquer votre interface utilisateur jusqu'à ce que vous ayez calculé votre mise en page.

244
ide

Vous pouvez directement utiliser le module Dimensions et calculer la taille de vos vues. En fait, Dimensions vous donne les tailles principales de la fenêtre.

import Dimensions from 'Dimensions';

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

J'espère vous aider!

33
Bruno Guerra

C'est la seule chose qui a fonctionné pour moi:

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);
18
Abhishek Kumar

Peut-être que vous pouvez utiliser 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);
}
10
Yinfeng

Fondamentalement, si vous souhaitez définir la taille et la modifier, définissez-la sur la disposition de la manière suivante:

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

Vous pouvez créer de nombreuses variantes de la manière dont il doit être modifié, en l'utilisant dans un autre composant doté d'une autre vue et en créant un rappel onResponderRelease, qui pourrait transmettre l'emplacement de l'événement tactile à l'état, qui pourrait ensuite être transmis au composant enfant. en tant que propriété, qui pourrait remplacer l'état mis à jour onLayout en plaçant {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]} et ainsi de suite.

9
juslintek

Voici le code pour obtenir les dimensions de la vue complète de l'appareil.

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

Utilisez-le comme ceci:

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

0
ravi