Question

我目前正在反应原生版本 0.7.1上编写应用程序。我试图写一个聊天组件。

通过聊天，您通常会在底部输入文本，并将消息从屏幕的底部推送到屏幕顶部。此外，当聊天屏幕初始化时，它在屏幕底部初始化并允许用户向上滚动。我想在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>
);

Answer 1

我不确定是否有更简单的方法来获取ScrollView的高度，但我确实在ListView（/Libraries/CustomComponents/ListView/ListView.js）的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）的一部分。

Answer 2

如果你没有在构造函数中绑定函数，那么这可能会变成未定义的。

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>

然后添加bind（放置在构造函数中）：

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

React Native - 获取当前组件的高度，反向滚动视图

2 个答案: