ios - React Native - 获取当前组件的高度，反向 ScrollView

Question

我目前正在使用 react-native version 0.7.1 编写应用程序。我正在尝试编写一个聊天组件。

在聊天中，您通常会在底部输入文本，消息会从屏幕底部推送到屏幕顶部。此外，当聊天屏幕初始化时，它会在屏幕底部初始化并允许用户向上滚动。我想在 react-native 中实现相同的行为。 ScrollView 的当前行为将项目从顶部推到底部。我尝试了几种不同的解决方案:

• 第一个解决方案涉及尝试测量 ScrollView 组件。这个概念是，如果我知道 View 的高度，我可以 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>
);

Answer 1

我不确定是否有更简单的方法来获取 ScrollView 的高度，但我确实在 ListView 的 React Native 源代码中注意到了这一点 (/Libraries/CustomComponents/ListView/ListView.js):

_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;
},

获取高度或宽度取决于是否设置了 horizo​​ntal 属性。 RCTUIManager 是 native 模块模块 (require('NativeModules').UIManager) 的一部分。