Question

我正在构建一个聊天应用，但坚持如何滚动内容滚动到底部

this.setState({ scrollY: event.nativeEvent.contentOffset.y });

我尝试了上述但失败了。

Answer 1

试试这个

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text } from 'native-base';
export default class AnatomyExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content ref={c => (this.component = c)}>
          <Button style={{ margin: 20 }}
            onPress={() => this.component._root.scrollToEnd()}>
            <Text>Scroll to end</Text>
          </Button>
          <Text style={{ margin: 20 }}>test</Text>
          <Text style={{ margin: 20 }}>test</Text>
          <Text style={{ margin: 20 }}>test</Text>
          ...
          ...
          ...
        </Content>
      </Container>
    );
  }
}

Answer 2

我建议您使用两个可以帮助您实现聊天应用的库。

React Native最完整的聊天用户界面：https://github.com/FaridSafi/react-native-gifted-chat InvertibleScrollView是一个React Native滚动视图，可以反转，以便从底部开始呈现内容： https://github.com/expo/react-native-invertible-scroll-view

否则，您是否可以提供expo.snack.io示例，以便我们为您的问题提供更多信息。

干杯，路易斯

Answer 3

我也在这个问题上苦苦挣扎了大约一个星期，对我没有任何帮助。最后，我使用了react-native-keyboard-aware-scroll-view来达到目的。

          <KeyboardAwareScrollView ref={ref => {this.scrollView = ref }}>
            <View style={styles.container}>
                <ListView
                ref='listView'
                dataSource={this.state.entries}
                onLayout={this.onLayout}
                renderFooter={this.renderFooter}
                renderRow={(item) => this._renderItem(item)}
                enableEmptySections />
            </View>
        </KeyboardAwareScrollView>

someFunc(){
    this.scrollView.scrollToEnd();
}

Answer 4

其他答案在最新版本中无效。

Content内部使用KeyboardAwareScrollView。因此，如果您想访问其参考。

       <Content innerRef={c=> (this.contentRef=c)}>

并且从此“内部参考”中，您可以看到各种滚动事件

  this.contentRef.props.scrollToPosition(0, 0) // Go to specific position. in this case its top
  this.contentRef.props.scrollToEnd() //scroll to end

Native Base内容滚动到底部

4 个答案: