獲取視圖的內容大小React Native輸出？

React Native提供了一個名爲RCTRootView的視圖類。您可以指定RootView應該呈現內容的框架，並繼續執行。獲取視圖的內容大小React Native輸出？

但在我的使用情況中，內容視圖的大小是動態的，並且取決於傳遞到React Native中的數據。這個大小很重要，因爲我要將React Native視圖放入一個自我大小的細胞。

這是如何完成的？

2015-04-03 fatuhoku

這是爲了將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。

來源

2015-07-18 01:14:48

獲取視圖的內容大小React Native輸出？

回答

相關問題