Native Base内容滚动到底部

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最完整的聊天UI：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();
}