React Native - 獲取當前組件的高度，反向滾動視圖

我目前正在編寫一個應用程序，反應原生版本0.7.1。我正在嘗試編寫聊天組件。React Native - 獲取當前組件的高度，反向滾動視圖

通過聊天，您通常會在底部輸入文字，並將消息從屏幕底部推到頂部。此外，當聊天畫面初始化時，它會在屏幕底部進行初始化，並允許用戶向上滾動。我想在react-native中實現相同的行爲。 ScrollView的當前行爲將項目從頂部推到底部。我嘗試了幾個不同的解決方案：

第一種解決方案涉及到嘗試測量ScrollView組件。這個概念是，如果我知道視圖的高度，我可以this.refs.messages.scrollTo(contentHeight)。有人提到以下功能：this.refs.messages.measure(callbackWithTheseParams((a, b, width, height, px,py))。但度量函數原來是未定義的。
第二種方法涉及包https://www.npmjs.com/package/react-native-invertible-scroll-view。這個包實際上也正確地排序了我的數據（反向）。你可以考慮像翻轉屏幕上的像素，使得（0,0）是底部。這使我可以撥打scrollTo(0,0)。但是，似乎這個功能僅在0.8.0-rc中可用。我不確定的是穩定的（或者相當穩定）。

編輯 - 添加範例

我的構造函數：

componentDidMount() { 
    this.measureComponent() 
} 

// measureComponent 
measureComponent() { 
    console.log('this gets called'); 
    this.refs.messages.measure((ox, oy, width, height) => { 
     console.log(height); // does not get called. 
    }); 
}

我的渲染功能是：

return (
    <ScrollView 
    scrollEventThrottle={200} 
    ref="messages" 
    style={styles.container}> 
    <View style={styles.messages}> 
     {messages.map(this.renderMessage)} 
    </View> 
    <TextInput 
     style={styles.newMessage} 
     value={this.state.message} 
     onSubmitEditing={this.sendMessage} 
     onChangeText={(text) => this.setState({message: text})} /> 
    </ScrollView> 
);

來源

2015-07-20 Lfa

我不知道如果有一個更簡單的方法獲得ScrollView的高度，但我確實在ListView（）的React Native源代碼中注意到了這一點）：

_measureAndUpdateScrollProps: function() { 
    var scrollComponent = this.getScrollResponder(); 
    ... 
    RCTUIManager.measureLayout(
    scrollComponent.getInnerViewNode(), 
    React.findNodeHandle(scrollComponent), 
    logError, 
    this._setScrollContentLength 
); 
    ... 
}, 
_setScrollContentLength: function(left, top, width, height) { 
    this.scrollProperties.contentLength = !this.props.horizontal ? 
    height : width; 
},

它得到高度或取決於如果horizontal屬性被設置的寬度。 RCTUIManager是本地模塊模塊（require('NativeModules').UIManager）的一部分。

來源

2015-07-20 18:10:22

謝謝你 - 收到一個錯誤，試圖測量佈局，但o ffset維度爲NaN – Lfa

我可以調用measure而不是measureLayout，但是使用this.refs.messages.getScrollResponder（）（我的scrollview）。回調是所有參數全部返回0。 – Lfa

如果你沒有在構造函數中綁定函數，這可能會變成undefined。

this.refs.messages.measure(callbackWithTheseParams((a, b, width, height, px,py)).

嘗試類似：

_measureFunc() { 
    this.refs.MESSAGES.measure((ox, oy, width, height) => { 
     setState ({ h: height }); 
    }); 
}

例如，這將是你的郵件組件：

<View ref='MESSAGES' ></View>

然後添加綁定（放置在構造函數）：

this._measureFunc = this._measureFunc.bind(this);

來源

2015-07-21 02:24:47 boredgames

回調永遠不會被調用：/ – Lfa

真的嗎？在這個例子中工作https://rnplay.org/apps/gVi_jA – boredgames

我在版本0.7。1 hm – Lfa

React Native - 獲取當前組件的高度，反向滾動視圖

回答

相關問題