也许你可以用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);
}

你可以通过onLayout道具轻松获取视图的大小。

import React from 'react'
import { View } from 'react-native'

export default function index() {
  const onLayout=(event)=> {
    const {x, y, height, width} = event.nativeEvent.layout;
    
  }
  return (
    <View onLayout={onLayout}>
      <OtherComponent />
    </View>
  )
}

每当视图调整大小时，onLayout处理程序也将被调用。

主要的警告是onLayout处理程序是在组件挂载后的一帧首次调用的，因此您可能希望在计算布局之前隐藏UI。

您可以直接使用Dimensions模块并计算视图的大小。 实际上，Dimensions提供了主要窗口的大小。

import { Dimensions } from 'Dimensions';

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

希望对您有所帮助!

更新:今天使用本地样式表与Flex安排你的视图有助于在广泛的情况下用优雅的布局解决方案编写干净的代码，而不是计算你的视图大小…

尽管构建一个自定义网格组件(它响应主窗口调整大小事件)可以在简单的小部件组件中产生一个很好的解决方案

也许你可以用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);
}

从React Native 0.4.2开始，视图组件就有了onLayout道具。传入一个接受事件对象的函数。事件的nativeEvent包含了视图的布局。

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

每当视图调整大小时，onLayout处理程序也将被调用。

主要的警告是onLayout处理程序是在组件挂载后的一帧首次调用的，因此您可能希望在计算布局之前隐藏UI。

对我来说，将尺寸设置为%对我来说是有效的 宽度:100%