Dapatkan ukuran Tampilan di Bereaksi Asli

Apakah mungkin untuk mendapatkan ukuran (lebar dan tinggi) dari tampilan tertentu? Misalnya, saya memiliki pandangan yang menunjukkan kemajuan:

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

Saya perlu tahu lebar sebenarnya dari tampilan untuk menyelaraskan tampilan lain dengan benar. Apakah ini mungkin?

Pada Bereaksi Asli 0.4.2, Lihat komponen memiliki onLayoutpenyangga . Mengirimkan fungsi yang mengambil objek acara. Acara ini nativeEventberisi tata letak tampilan.

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

The onLayouthandler juga akan dipanggil setiap kali pandangan adalah ukurannya.

Peringatan utama adalah bahwa onLayoutpawang pertama kali dipanggil satu frame setelah komponen Anda dipasang, jadi Anda mungkin ingin menyembunyikan UI Anda sampai Anda telah menghitung tata letak Anda.

Ini adalah satu-satunya hal yang berhasil untuk saya:

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

Pada dasarnya jika Anda ingin mengatur ukuran dan membuatnya berubah maka aturlah untuk menyatakan tata letak seperti ini:

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

Anda dapat membuat lebih banyak variasi tentang bagaimana hal itu harus dimodifikasi, dengan menggunakan ini di komponen lain yang memiliki tampilan lain sebagai pembungkus dan membuat panggilan balik onResponderRelease, yang dapat melewati lokasi acara sentuh ke keadaan, yang kemudian dapat diteruskan ke komponen anak sebagai properti, yang dapat mengesampingkan keadaan diperbarui onLayout, dengan menempatkan {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}dan sebagainya.

Anda dapat langsung menggunakan Dimensionsmodul dan menghitung ukuran tampilan Anda. Sebenarnya, Dimensionsberikan kepada Anda ukuran jendela utama.

import { Dimensions } from 'Dimensions';

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

Semoga dapat membantu Anda!

Pembaruan : Hari ini menggunakan yang asli StyleSheetdengan Flex mengatur pandangan Anda membantu menulis kode bersih dengan solusi tata letak yang elegan dalam banyak kasus, bukannya menghitung ukuran tampilan Anda ...

Meskipun membangun komponen kisi khusus , yang merespons peristiwa pengubahan ukuran jendela utama, dapat menghasilkan solusi yang baik dalam komponen widget sederhana

Mungkin Anda bisa menggunakan 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);
}

bagi saya mengatur Dimensi untuk menggunakan% adalah apa yang berhasil bagi saya width:'100%'

Berikut adalah kode untuk mendapatkan Dimensi dari tampilan lengkap perangkat.

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

Gunakan seperti ini:

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