স্ক্রোলভিউটি নীচে স্ক্রোল করা কী সম্ভব?

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 এর ট্র্যাক রাখতে অনকন্টেসাইজ চেঞ্জ ব্যবহার করুন

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

২০২০ বা তার পরের যে কেউ কার্যক্ষম উপাদানগুলির সাথে এটি কীভাবে অর্জন করবেন তা ভাবছেন। আমি এইভাবে করেছি:

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

Question 7

এই সমাধান চেষ্টা করুন

এক্সকোড 10.0

আরএন: 56.0.0

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

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';

তারপরে এটার পরিবর্তে নিম্নলিখিত জেএসএক্স ব্যবহার করুন 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এটি অপরিজ্ঞাত ined

তবে আমি এটি আবিষ্কার করেছি এবং এটি কাজ করে this.scrollView.scrollResponderScrollToEnd({animated: true});

আপনি যদি এটি ব্যবহার করেন 0.59.8তবে OR কাজ করবে যদি আপনি পরে সংস্করণ ব্যবহার করেন এবং এটি আপনার জন্য কাজ করে। দয়া করে এই উত্তরে সংস্করণগুলি যুক্ত করুন যাতে অন্যরা সমস্যায় না পড়ে।

এখানে সম্পূর্ণ কোড

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

Question 10

এই পদ্ধতিটি খানিকটা হ্যাকি তবে এর থেকে ভাল আর কোনও উপায় খুঁজে পেলাম না

প্রথমে আপনার স্ক্রোলভিউতে একটি রেফ যুক্ত করুন।
দ্বিতীয়টি আপনার স্ক্রোলভিউ ট্যাগটি বন্ধ করার আগে একটি ডামি ভিউ যুক্ত করুন
সেই ডামি ভিউয়ের 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(এর নির্দিষ্ট উচ্চতা ScrollView) বিয়োগ করে অফসেটটি গণনা করেছি currHeight। আপনি যদি দৃশ্যমানভাবে এটি কল্পনা করতে পারেন, y- অক্ষের মধ্যে এই পার্থক্যের দিকে স্ক্রোল করে that অফসেট দ্বারা সামগ্রীর উচ্চতাটিকে তার ধারকটির উপরে স্লাইড করে। আমি আমার অফসেটটি বাড়িয়েছি এবং আমার এখনকার সামগ্রীটিকে আমার আগের উচ্চতা তৈরি করেছি এবং একটি নতুন অফসেট গণনা করতে থাকি।

কোডটি এখানে। আশা করি এটি কাউকে সাহায্য করবে।

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

আমারও একই সমস্যা ছিল, তবে এই পৃষ্ঠাটি পড়ার পরে (যা আমাকে মাথা ব্যথা দেয়!) আমি এই খুব সুন্দর এনপিএম প্যাকেজটি পেয়েছি যা কেবলমাত্র তালিকাভিউকে উল্টে দেয় এবং চ্যাট অ্যাপ্লিকেশনটির জন্য সবকিছু সহজ করে দেয় !!

Question 17

কিছুটা দেরি ... তবে এই প্রশ্নটি দেখুন। স্ক্রোলভিউয়ের শীর্ষে স্ক্রোল করুন

স্ক্রোলভিউয়ের একটি "স্ক্রোলটো" পদ্ধতি রয়েছে।