क्या स्क्रॉल स्क्रॉल को नीचे तक रखना संभव है?

Question 1

चैट जैसी ऐप के लिए, मैं एक ScrollViewघटक को नीचे तक स्क्रॉल करना चाहता हूं , क्योंकि पुराने वाले के तहत नवीनतम संदेश दिखाई देते हैं। क्या हम स्क्रॉल की स्थिति को समायोजित कर सकते हैं ScrollView?

Question 2

0.41 रीऐक्टिव नेटिव के लिए और बाद में , आप इसे बिल्ट-इन scrollToEndविधि से कर सकते हैं :

<ScrollView
    ref={ref => {this.scrollView = ref}}
    onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}>
</ScrollView>

Question 3

स्क्रॉल दृश्य (ऊंचाई) के नीचे Y का ट्रैक रखने के लिए onContentSizeChange का उपयोग करें

https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange

var _scrollToBottomY

<ScrollView
    onContentSizeChange={(contentWidth, contentHeight)=>{
    _scrollToBottomY = contentHeight;
    }}>
</ScrollView>

फिर स्क्रॉल दृश्य के रेफरी नाम का उपयोग करें

this.refs.scrollView.scrollTo(_scrollToBottomY);

Question 4

यहाँ सबसे सरल समाधान है जो मैं कर सकता था:

 <ListView
ref={ref => (this.listView = ref)}
onLayout={event => {
    this.listViewHeight = event.nativeEvent.layout.height;
}}
onContentSizeChange={() => {
    this.listView.scrollTo({
        y: this.listView.getMetrics().contentLength - this.listViewHeight
    });
}}
/>;

Question 5

किसी भी फ़ंक्शन फ़ंक्शन के लिए हुक का उपयोग कर सकते हैं,

import React, { useRef } from 'react';
import { ScrollView } from 'react-native';

const ScreenComponent = (props) => {
  const scrollViewRef = useRef();
  return (
    <ScrollView
      ref={scrollViewRef}
      onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })}
    />
  );
};

Question 6

इस समाधान का प्रयास करें

xcode 10.0

आरएन: 56.0.0

<ScrollView ref="scrollView"
             onContentSizeChange={(width,height) => this.refs.scrollView.scrollTo({y:height})}>  </ScrollView> // OR height -  width

Question 7

मामले में किसी को भी 2020 या बाद में सोच रहा है कि कार्यात्मक घटकों के साथ इसे कैसे प्राप्त किया जाए। मैंने ऐसा किया है:

ref={ref => scrollView = ref }
onContentSizeChange={() => scrollView.scrollToEnd({ animated: true })}>

Question 8

आप react-native-invertible-scroll-viewमॉड्यूल का उपयोग करके स्क्रॉल / सूची दृश्य को उल्टा कर सकते हैं , फिर बस कॉल कर सकते हैंref.scrollTo(0) नीचे स्क्रॉल करने के लिए ।

मॉड्यूल स्थापित करें:

npm install --save react-native-invertible-scroll-view

फिर घटक आयात करें:

import InvertibleScrollView from 'react-native-invertible-scroll-view';

इसके बाद निम्न JSX का उपयोग करें ScrollView:

<InvertibleScrollView inverted
    ref={ref => { this.scrollView = ref; }}
    onContentSizeChange={() => {
        this.scrollView.scrollTo({y: 0, animated: true});
    }}
>
    { /* content */ }
</InvertibleScrollView>

यह काम करता है क्योंकि react-native-invertible-scroll-viewपूरे दृश्य की सामग्री को फ़्लिप करता है। ध्यान दें कि दृश्य के बच्चे एक सामान्य दृश्य के विपरीत क्रम में भी प्रस्तुत करेंगे - पहला बच्चा सबसे नीचे दिखाई देगा ।

Question 9

दरअसल @ अनिरुद्ध जवाब मेरे लिए काम नहीं करता क्योंकि मैं उपयोग कर रहा हूं "react-native": "0.59.8"और this.scrollView.root.scrollToEndअपरिभाषित भी

लेकिन मुझे यह समझ में आया और यह काम करता है this.scrollView.scrollResponderScrollToEnd({animated: true});

यदि आप उपयोग कर रहे हैं 0.59.8 तो आप काम करेंगे या यदि आप बाद के संस्करण का उपयोग कर रहे हैं और यह आपके लिए काम करता है। कृपया इस उत्तर में संस्करण जोड़ें ताकि दूसरों को परेशानी न हो।

यहां पूरा कोड

<ScrollView
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollResponderScrollToEnd({animated: true});
    }}>
</ScrollView>

Question 10

यह तरीका थोड़ा आसान है, लेकिन मैं इससे बेहतर तरीका नहीं खोज सकता

सबसे पहले अपने ScrollView में एक रेफरी जोड़ें।
अपना स्क्रॉल दृश्य टैग बंद करने से पहले दूसरा एक डमी दृश्य जोड़ें
उस डमी दृश्य की y स्थिति प्राप्त करें
जब भी आप डमी व्यू की स्थिति तक नीचे स्क्रॉल करना चाहते हैं

var footerY; //Y position of the dummy view
render() {    
    return (
      <View>
          <ScrollView 
          ref='_scrollView'>
            // This is where all the things that you want to display in the scroll view goes
            
            // Below is the dummy View
            <View onLayout={(e)=> {
              footerY = e.nativeEvent.layout.y;
              }}/>
          </ScrollView>
              
          //Below is the button to scroll to the bottom    
          <TouchableHighlight
            onPress={() => { this.refs._scrollView.scrollTo(footerY); }}>
            <Text>Scroll to Bottom</Text>
          </TouchableHighlight>
        
      </View>
    );
  }

स्निपेट का विस्तार करें

Question 11

यह आपके प्रश्न का उत्तर देता है: https://stackoverflow.com/a/39563100/1917250

आपको अपने स्क्रॉलव्यू की ऊंचाई की सामग्री की ऊंचाई की गणना करके पृष्ठ के निचले भाग तक लगातार स्क्रॉल करने की आवश्यकता है।

Question 12

यदि आप टाइपस्क्रिप्ट का उपयोग करते हैं तो आपको यह करने की आवश्यकता है

interface Props extends TextInputProps { 
     scrollRef?: any;
}

export class Input extends React.Component<Props, any> {
     scrollRef;
constructor(props) {
    this.scrollRef = React.createRef();
}
<ScrollView
    ref={ref => (this.scrollRef = ref)}
    onContentSizeChange={() => {
    this.scrollRef.scrollToEnd();
    }}
>
</ScrollView>

Question 13

मैं इसके साथ कुछ समय तक लड़ता रहा और आखिरकार कुछ ऐसा हुआ जो मेरे लिए बहुत अच्छा और आसान काम था। कई की तरह, मैंने कोशिश की.scrollToEnd कोई फायदा नहीं उठाया। मेरे लिए जो समाधान काम करता था onContentSizeChange, उसका एक संयोजन था ,onLayout रंगमंच की सामग्री और "थोड़ा नीचे स्क्रॉल करने के लिए" वास्तव में क्या मतलब है के बारे में थोड़ा और अधिक सोच। आखिरी हिस्सा अब मुझे मामूली लगता है, लेकिन मुझे हमेशा के लिए पता लग गया।

यह देखते हुए कि ScrollViewएक निश्चित ऊँचाई है, जब सामग्री की ऊँचाई कंटेनर की ऊँचाई से अधिक हो जाती है, तो मैंने prevHeight(की निश्चित ऊँचाई) घटाकर ऑफसेट की गणना कीScrollViewcurrHeight (सामग्री की ऊंचाई) के ) । यदि आप नेत्रहीन रूप से इसकी कल्पना कर सकते हैं, तो y- अक्ष में उस अंतर तक स्क्रॉल करना, उस ऑफसेट द्वारा इसके कंटेनर पर सामग्री की ऊँचाई को स्लाइड करता है। मैंने अपने ऑफसेट को बढ़ाया और अपनी वर्तमान सामग्री को मेरी पिछली ऊंचाई से बनाया और एक नई ऑफसेट की गणना करता रहा।

यहाँ कोड है। आशा है कि यह किसी की मदद करता है।

class ChatRoomCorrespondence extends PureComponent {
  currHeight = 0;
  prevHeight = 0;
  scrollHeight = 0;

  scrollToBottom = () => {
    this.refs.scrollView.getScrollResponder().scrollResponderScrollTo({
      x: 0,
      y: this.scrollHeight,
      animated: true
    });
  };

  render() {
    return (
      <ScrollView
        style={Styles.container}
        ref="scrollView"
        onContentSizeChange={(w, h) => {
          this.currHeight = h;

          if (
            this.prevHeight > 0 &&
            this.currHeight - this.scrollHeight > this.prevHeight
          ) {
            this.scrollHeight += this.currHeight - this.prevHeight;
            console.log("--------------------------------------------");
            console.log("Curr: ", this.currHeight);
            console.log("Prev: ", this.prevHeight);
            console.log("Scroll: ", this.scrollHeight);
            this.prevHeight = this.currHeight;
            console.log("PREV: ", this.prevHeight);
            console.log("--------------------------------------------");

            this.scrollToBottom();
          }
        }}
        onLayout={ev => {
          // Fires once
          const fixedContentHeight = ev.nativeEvent.layout.height;
          this.prevHeight = fixedContentHeight;
        }}
      >
        <FlatList
          data={this.props.messages}
          renderItem={({ item }) => (
            <ChatMessage
              text={item.text}
              sender={item.sender}
              time={item.time}
              username={this.props.username}
            />
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </ScrollView>
    );
  }
}

Question 14

मुझे लगता है कि उत्तर देने में बहुत देर हो चुकी है लेकिन मुझे एक हैक मिल गया है! यदि आप उपयोग करते हैं FlatListतो आप उस invertedसंपत्ति को सक्षम कर सकते हैं जो सेटिंग में वापस आती transform scaleहै -1(जो अन्य सूची घटकों जैसे ScrollView...) के लिए स्वीकार्य है । जब आप अपने FlatListडेटा के साथ प्रस्तुत करते हैं तो यह हमेशा तल पर होगा!

Question 15

सामग्री की वर्तमान ऊंचाई तक स्क्रॉल दृश्य की सामग्री को सेट करने का प्रयास करें ।

यह सुनिश्चित करने के लिए कि ऑनस्क्राॅल इवेंट के हिस्से के रूप में आपको क्या चाहिए। हालाँकि यह एक बुरे उपयोगकर्ता अनुभव के लिए हो सकता है इसलिए यह एक नया संदेश संलग्न होने पर केवल ऐसा करने के लिए अधिक उपयोगकर्ता के अनुकूल साबित हो सकता है।

Question 16

मुझे भी इसी तरह की समस्या थी, लेकिन इस पृष्ठ को पढ़ने के बाद (जो मुझे सिरदर्द देता है!) मुझे यह बहुत अच्छा npm पैकेज लगता है जो सिर्फ ListView को उल्टा करता है और एक चैट एप्लिकेशन के लिए सब कुछ आसान बनाता है !!

Question 17

थोड़ी देर ... लेकिन इस सवाल पर गौर करें। स्क्रॉल के शीर्ष पर स्क्रॉल करें

स्क्रॉलव्यू में एक "स्क्रोल्टो" विधि है।