react-native - 获取 View React Native 输出的内容大小？

Question

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

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

这是怎么做到的？

Answer 1

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

• 将您的桥梁声明为我们将在其中发送内容的 native 代码大小(取决于偏好，我在文件顶部的任何类/函数)。
• 调用 JSX 组件的 onLayout 属性中的方法。
• 在被调用的onLayout方法中，将content size数据发送给bridge。
• 根据需要在 native 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 中使用 RCT_EXPORT_METHOD，如 React Native's documentation 中所述创建“ReactBridge”并处理“setLayout”方法上发送的数据。在这种情况下，数据将是一个 NSDictionary，但您可以轻松地仅发送布局高度，然后您将获得一个 CGFloat。