获取视图 React Native 输出的内容大小？答案

【问题标题】：Get the content size of view React Native outputs?获取视图 React Native 输出的内容大小？
【发布时间】：2015-04-03 11:00:32
【问题描述】：

React Native 提供了一个名为 RCTRootView 的视图类。您指定 RootView 应在其中渲染内容的框架，然后它会继续执行。

在我的用例中，内容视图的大小是动态的，并且取决于传递给 React Native 的数据。这个大小很重要，因为我要将 React Native 视图放入例如一个自定大小的单元格。

这是怎么做到的？

【问题讨论】：

这是为了在另一个应用程序中嵌入 RN 吗？如果没有，你的用例是什么？
@ColinRamsay “另一个”应用是什么意思？我只是希望 CollectionViewCell 的内容本质上是一个 RN 视图。我需要知道内容的大小，以便可以调整 CollectionViewCell 的自动布局约束，使其自动布局。但是，目前还不清楚渲染后如何获取RN的内容高度。
另外，我想将RCTRootView 添加到本机UIScrollView 中，例如，我已经预先配置了一些特殊行为。滚动视图需要知道内容的大小。
@fatuhoku 你发现了吗？
@rhodesy22 是的，我做到了！在视图的 onLayout 属性上设置回调，使用 (x,y,width,height) 调用该属性。然后我调用一个本机模块方法，该方法将这个矩形信息作为通知发出。在 viewController 的正确位置，我观察了这个通知，适当地设置了 scrollView 的 contentSize。似乎运作良好。

标签： react-native

【解决方案1】：

@fatuhoku 经过一番挖掘，我得出了同样的结论。对于其他想要这样做的人，这里有一个例子。

声明您到本机代码的桥接，我们将在其中发送内容大小（取决于偏好，我在文件顶部的任何类/函数）。
在 JSX 组件的 onLayout 属性中调用方法。
在调用的 onLayout 方法中，将内容大小数据发送到网桥。
根据需要在本机 ObjC 或 Swift 代码中使用内容大小。

// MyReactComponent.jsx (ES6)

// Modules
var React = require('react-native');
var { View } = React;

// Bridge
var ReactBridge = require('NativeModules').ReactBridge;

// Type Definitions
type LayoutEvent = {
  nativeEvent: {
    layout: {
      x: number;
      y: number;
      width: number;
      height: number;
    };
  };
};

// React Component
class MyReactComponent extends React.Component {

  onViewLayout(e: LayoutEvent) {
    ReactBridge.setLayout(e.nativeEvent.layout);
  }

  render() {
    return (
      <View onLayout={ this.onViewLayout }>
        <ChildComponentExample />
      </View>
    );
  }
}

然后在 ObjC 中，您使用 React Native's documentation 中所述的 RCT_EXPORT_METHOD 来创建“ReactBridge”并处理通过“setLayout”方法发送的数据。在这种情况下，数据将是一个 NSDictionary，但您可以轻松地只发送布局高度，然后您将获得一个 CGFloat。

【讨论】：