web-dev-qa-db-de.com

Abrufen der Größe einer Ansicht in React Native

Ist es möglich, die Größe (Breite und Höhe) einer bestimmten Ansicht zu ermitteln? Zum Beispiel habe ich eine Ansicht, die den Fortschritt zeigt:

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

Ich muss die tatsächliche Breite der Ansicht kennen, um andere Ansichten richtig auszurichten. Ist das möglich?

113
Matthew

Ab React Native 0.4.2, View-Komponenten haben ein onLayout prop . Übergeben Sie eine Funktion, die ein Ereignisobjekt übernimmt. Das Ereignis nativeEvent enthält das Layout der Ansicht.

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

Der onLayoutHandler wird auch aufgerufen, wenn die Größe der Ansicht geändert wird.

Die wichtigste Einschränkung besteht darin, dass der onLayout -Handler erst einen Frame nach dem Mounten Ihrer Komponente aufgerufen wird. Sie können die Benutzeroberfläche also ausblenden, bis Sie das Layout berechnet haben.

244
ide

Sie können das Modul Dimensions direkt verwenden und die Größe Ihrer Ansichten berechnen. Tatsächlich gibt Ihnen Dimensions die Größe des Hauptfensters an.

import Dimensions from 'Dimensions';

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

Hoffe dir zu helfen!

33
Bruno Guerra

Dies ist das einzige, was bei mir funktioniert hat:

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

Vielleicht können Sie measure verwenden:

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

Grundsätzlich gilt: Wenn Sie die Größe festlegen und ändern möchten, stellen Sie den Status im Layout wie folgt ein:

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

Sie können viel mehr Variationen davon erstellen, wie sie geändert werden sollen, indem Sie diese in einer anderen Komponente verwenden, die eine andere Ansicht als Wrapper hat, und einen onResponderRelease-Rückruf erstellen, der die Position des Berührungsereignisses in den Zustand übergibt, der dann an die untergeordnete Komponente übergeben werden kann als Eigenschaft, die den aktualisierten OnLayout-Status überschreiben kann, indem {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]} und so weiter.

9
juslintek

Hier ist der Code, um die Abmessungen der vollständigen Ansicht des Geräts zu erhalten.

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

Benutze es so:

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

0
ravi