Question

React Native提供了一个名为RCTRootView的视图类。您指定了RootView应该在其中呈现内容的帧，并且它将继续并执行它。

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

这是怎么做到的？

Answer 1

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

将您的桥接器声明为我们要发送内容的本机代码 size（取决于首选项，我在外面创建实例）文件顶部的任何类/函数。）。
在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来创建＆＃34; ReactBridge＆＃34;并处理＆＃34; setLayout＆＃34;上发送的数据;方法。在这种情况下，数据将是一个NSDictionary，但你可以轻松地只发送布局高度，然后你得到一个CGFloat。

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

1 个答案: