3

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

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

这是怎么做到的？

4

1 回答 1

2

@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 文档中描述的 RCT_EXPORT_METHOD来创建“ReactBridge”并处理通过“setLayout”方法发送的数据。在这种情况下，数据将是一个 NSDictionary，但您可以轻松地只发送布局高度，然后您将获得一个 CGFloat。

于 2015-07-18T01:14:48.890 回答