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

问题描述：

React Native提供了一个名为RCTRootView的视图类。您可以指定RootView应该呈现内容的框架，并继续执行。获取视图的内容大小React Native输出？

但在我的使用情况中，内容视图的大小是动态的，并且取决于传递到React Native中的数据。这个大小很重要，因为我要将React Native视图放入一个自我大小的细胞。

这是如何完成的？

这是为了将RN嵌入到其他应用程序？如果不是，你的用例是什么？ – 2015-04-03 20:43:12

@ColinRamsay你是什么意思'另一个'的应用程序？本质上，我只想将CollectionViewCell的内容作为RN视图。我需要知道内容的大小，以便我可以调整CollectionViewCell的自动布局约束，以便自动布局。不过，目前尚不清楚如何在渲染后获得RN内容的高度。 – fatuhoku 2015-04-04 14:18:18

或者，我想将'RCTRootView'添加到原生的'UIScrollView'中，例如我已经预先配置了一些特殊的行为。滚动视图需要知道内容的大小。 – fatuhoku 2015-07-07 13:15:25

答

@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使用RCT_EXPORT_METHOD作为React Native's documentation描述打造“ReactBridge”并办理了“setLayout的”方法发送的数据。在这种情况下，数据将是NSDictionary，但您可以轻松发送布局高度，然后获得CGFloat。

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

相关推荐