Question

我有两个组成部分（父母和孩子）。子组件在可滚动的div中有来自服务器的一长串消息。我只想从底部滚动开始页面-就像普通的聊天一样。我不想看到它滚动到底部。我可以使用javascript或CSS吗？

这是我想要的例子。注意：不使用FlatLists 。 https://codesandbox.io/s/react-native-h32if?file=/src/App.js

谢谢。

class ParentComponent extends Component{

    render(){
      return(
  
        <div>
                <ChildComponent key={uniqueKey()} stream_uid={this.props.match.params.stream_uid} />       
        </div>
      )
    }
  
}


class ChildComponent extends Component{

    constructor() {

        this.state = {
          chat_messages: []
        }

    }

    componentDidMount () {

        this.props.dispatch(getStream(this.props.stream_uid,1,this.props.history)); 

        if(this.props.stream) {

            this.setState({
                chat_messages: this.props.stream.stream.messages
            })
        }

    }

  render(){

    return(
        <div>

            {Array.isArray(this.state.chat_messages) && this.state.chat_messages.map(message => {                           
                return (
                    <div>
                        <div>{message.username}</div>
                        <div>{message.text}</div>
                    </div>
                )

            })}                                                            
        </div>

    )

  }
}

Answer 1

您可以通过将div设置为像这样滚动到底部来实现

import React, { useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const listRef = useRef();
  useEffect(() => {
    listRef.current.scrollTo(0, listRef.current.scrollHeight, "auto");
  }, []);

  return (
    <div
      style={{ height: "200px", overflowY: "scroll" }}
      id="list"
      ref={listRef}
    >
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
    </div>
  );
}

这是一个代码箱demo

Answer 2

我创建了一个父视图来做出反应。这是一个演示外观

[https://codesandbox.io/s/react-native-forked-2o3dq?file=/src/App.js] [1]

<View style={styles.main}>
        <FlatList
          ref={(ref) => (this._flatlistRef = ref)}
          inverted
          showsVerticalScrollIndicator={false} // does not work
          contentContainerStyle={styles.container}
          data={data}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          onEndReached={this.props.onLoadMore}
        />
      </View>
 container: {
    overflowY: "scroll",
    height: 200,
    backgroundColor: "red"
  },

从底部React的滚动开始

2 个答案: