รับตำแหน่งเลื่อนปัจจุบันของ ScrollView ใน React Native

เป็นไปได้ไหมที่จะได้รับตำแหน่งการเลื่อนปัจจุบันหรือหน้าปัจจุบันของ<ScrollView>ส่วนประกอบใน React Native

สิ่งที่ชอบ:

<ScrollView
  horizontal={true}
  pagingEnabled={true}
  onScrollAnimationEnd={() => { 
      // get this scrollview's current page or x/y scroll position
  }}>
  this.state.data.map(function(e, i) { 
      <ImageCt key={i}></ImageCt> 
  })
</ScrollView>

ลอง.

<ScrollView onScroll={this.handleScroll} />

แล้ว:

handleScroll: function(event: Object) {
 console.log(event.nativeEvent.contentOffset.y);
},

คำเตือน: สิ่งต่อไปนี้เป็นผลมาจากการทดลองของฉันเองใน React Native 0.50 ScrollViewเอกสารปัจจุบันจะหายไปจำนวนมากข้อมูลที่ครอบคลุมด้านล่าง; ตัวอย่างเช่นonScrollEndDragไม่มีเอกสารทั้งหมด เนื่องจากทุกสิ่งที่นี่ขึ้นอยู่กับพฤติกรรมที่ไม่มีเอกสารเราจึงไม่สามารถให้คำมั่นสัญญาได้ว่าข้อมูลนี้จะยังคงถูกต้องในหนึ่งปีหรือแม้แต่หนึ่งเดือนนับจากนี้

นอกจากนี้ทุกอย่างดังต่อไปนี้ถือว่า scrollview แนวตั้งอย่างหมดจดมีYชดเชยเรามีความสนใจใน; การแปลเป็นx offsets หากจำเป็นหวังว่าจะเป็นแบบฝึกหัดที่ง่ายสำหรับผู้อ่าน

จัดการเหตุการณ์ต่างๆบนScrollViewใช้เวลาและปล่อยให้คุณได้รับการเลื่อนตำแหน่งในปัจจุบันผ่านevent event.nativeEvent.contentOffset.yเครื่องจัดการเหล่านี้บางตัวมีพฤติกรรมที่แตกต่างกันเล็กน้อยระหว่าง Android และ iOS ตามรายละเอียดด้านล่าง

onScroll

บน Android

เริ่มทำงานทุกเฟรมในขณะที่ผู้ใช้กำลังเลื่อนในทุกเฟรมในขณะที่มุมมองแบบเลื่อนกำลังเลื่อนหลังจากที่ผู้ใช้ปล่อยเฟรมในเฟรมสุดท้ายเมื่อมุมมองการเลื่อนหยุดลงและเมื่อใดก็ตามที่ออฟเซ็ตของมุมมองการเลื่อนเปลี่ยนไปอันเป็นผลมาจากเฟรม การเปลี่ยนแปลง (เช่นเนื่องจากการหมุนจากแนวนอนเป็นแนวตั้ง)

บน iOS

ไฟไหม้ขณะที่ผู้ใช้ลากหรือในขณะที่มุมมองเลื่อนจะร่อนที่ความถี่บางกำหนดโดยและที่มากที่สุดครั้งหนึ่งต่อกรอบเมื่อscrollEventThrottle หากผู้ใช้ออกจากมุมมองแบบเลื่อนในขณะที่มีโมเมนตัมเพียงพอที่จะเลื่อนตัวจัดการจะยิงเมื่อมันหยุดนิ่งหลังจากร่อน อย่างไรก็ตามหากผู้ใช้ลากแล้วปล่อยมุมมองการเลื่อนในขณะที่อยู่กับที่จะไม่รับประกันว่าจะยิงในตำแหน่งสุดท้ายเว้นแต่จะได้รับการตั้งค่าไว้เช่นนั้นซึ่งจะทำให้ทุกเฟรมของการเลื่อนเริ่มทำงานscrollEventThrottle={16}onScrollonScrollscrollEventThrottleonScroll

มีต้นทุนด้านประสิทธิภาพในการตั้งค่าscrollEventThrottle={16}ที่สามารถลดลงได้โดยการตั้งค่าเป็นจำนวนที่มากขึ้น อย่างไรก็ตามหมายความว่าonScrollจะไม่ยิงทุกเฟรม

onMomentumScrollEnd

เริ่มทำงานเมื่อมุมมองการเลื่อนหยุดลงหลังจากเลื่อน จะไม่เริ่มทำงานเลยหากผู้ใช้ปล่อยมุมมองแบบเลื่อนในขณะที่อยู่กับที่เพื่อไม่ให้เลื่อน

onScrollEndDrag

เริ่มทำงานเมื่อผู้ใช้หยุดลากมุมมองการเลื่อนไม่ว่ามุมมองการเลื่อนจะอยู่นิ่ง ๆ หรือเริ่มเลื่อน

เนื่องจากความแตกต่างในพฤติกรรมเหล่านี้วิธีที่ดีที่สุดในการติดตามการชดเชยขึ้นอยู่กับสถานการณ์ที่แน่นอนของคุณ ในกรณีที่ซับซ้อนที่สุด (คุณต้องรองรับ Android และ iOS รวมถึงการจัดการการเปลี่ยนแปลงในScrollViewเฟรมเนื่องจากการหมุนและคุณไม่ต้องการยอมรับการลงโทษประสิทธิภาพบน Android จากการตั้งค่าscrollEventThrottleเป็น 16) และคุณต้องจัดการ การเปลี่ยนแปลงเนื้อหาในมุมมองแบบเลื่อนด้วยแล้วมันก็เป็นระเบียบ

กรณีที่ง่ายที่สุดคือหากคุณต้องการจัดการกับ Android เท่านั้น เพียงใช้onScroll:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
>

หากต้องการรองรับ iOS เพิ่มเติมหากคุณพอใจที่จะยิงonScrollตัวจัดการทุกเฟรมและยอมรับผลกระทบด้านประสิทธิภาพของสิ่งนั้นและหากคุณไม่จำเป็นต้องจัดการกับการเปลี่ยนแปลงเฟรมก็จะซับซ้อนขึ้นเล็กน้อย:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={16}
>

เพื่อลดค่าใช้จ่ายด้านประสิทธิภาพบน iOS ในขณะที่ยังคงรับประกันว่าเราบันทึกตำแหน่งใด ๆ ที่มุมมองเลื่อนกำหนดเราสามารถเพิ่มscrollEventThrottleและจัดหาonScrollEndDragตัวจัดการเพิ่มเติมได้:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={160}
>

แต่ถ้าเราต้องการจัดการการเปลี่ยนแปลงเฟรม (เช่นเนื่องจากเราอนุญาตให้หมุนอุปกรณ์เปลี่ยนความสูงที่มีอยู่สำหรับเฟรมของมุมมองการเลื่อน) และ / หรือการเปลี่ยนแปลงเนื้อหาเราจะต้องใช้ทั้งสองอย่างเพิ่มเติมonContentSizeChangeและonLayoutเพื่อติดตามความสูงของทั้งสองอย่าง เฟรมของมุมมองแบบเลื่อนและเนื้อหาและด้วยเหตุนี้จึงคำนวณค่าชดเชยสูงสุดที่เป็นไปได้อย่างต่อเนื่องและอนุมานเมื่อออฟเซ็ตถูกลดลงโดยอัตโนมัติเนื่องจากการเปลี่ยนแปลงขนาดเฟรมหรือเนื้อหา:

<ScrollView
  onLayout={event => {
    this.frameHeight = event.nativeEvent.layout.height;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onContentSizeChange={(contentWidth, contentHeight) => {
    this.contentHeight = contentHeight;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  scrollEventThrottle={160}
>

ใช่มันค่อนข้างน่ากลัว ฉันยังไม่ 100% บางอย่างที่มันก็จะทำงานที่ถูกต้องในกรณีที่คุณไปพร้อม ๆ กันเปลี่ยนขนาดของทั้งกรอบและเนื้อหาของมุมมองเลื่อน แต่เป็นสิ่งที่ดีที่สุดที่ฉันสามารถทำได้และจนกว่าคุณสมบัตินี้จะถูกเพิ่มเข้าไปในเฟรมเวิร์กฉันคิดว่านี่เป็นสิ่งที่ดีที่สุดที่ทุกคนสามารถทำได้

คำตอบของ Brad Oyler ถูกต้อง แต่คุณจะได้รับเพียงกิจกรรมเดียวเท่านั้น หากคุณต้องการรับการอัปเดตตำแหน่งการเลื่อนอย่างต่อเนื่องคุณควรตั้งscrollEventThrottleเสาดังนี้:

<ScrollView onScroll={this.handleScroll} scrollEventThrottle={16} >
  <Text>
    Be like water my friend …
  </Text>
</ScrollView>

และตัวจัดการเหตุการณ์:

handleScroll: function(event: Object) {
  console.log(event.nativeEvent.contentOffset.y);
},

โปรดทราบว่าคุณอาจประสบปัญหาด้านประสิทธิภาพ ปรับคันเร่งให้เหมาะสม 16 ช่วยให้คุณได้รับการอัปเดตมากที่สุด 0 เท่านั้น

หากคุณต้องการเพียงแค่รับตำแหน่งปัจจุบัน (เช่นเมื่อกดปุ่มบางปุ่ม) แทนที่จะติดตามเมื่อใดก็ตามที่ผู้ใช้เลื่อนการเรียกonScrollผู้ฟังจะทำให้เกิดปัญหาด้านประสิทธิภาพ ปัจจุบันวิธีที่มีประสิทธิภาพมากที่สุดในการรับตำแหน่งการเลื่อนปัจจุบันคือการใช้แพ็คเกจreact-native-invoke มีตัวอย่างสำหรับสิ่งที่แน่นอนนี้ แต่แพคเกจทำสิ่งอื่นได้หลายอย่าง

อ่านเกี่ยวกับเรื่องนี้ได้ที่นี่ https://medium.com/@talkol/invoke-any-native-api-directly-from-pure-javascript-in-react-native-1fb6afcdf57d#.68ls1sopd

หากต้องการรับ x / y หลังจากการเลื่อนสิ้นสุดลงตามที่มีการร้องขอคำถามเดิมวิธีที่ง่ายที่สุดอาจเป็นดังนี้:

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={(event) => { 
      // scroll animation ended
      console.log(e.nativeEvent.contentOffset.x);
      console.log(e.nativeEvent.contentOffset.y);
   }}>
   ...content
</ScrollView>

คำตอบข้างต้นบอกว่าจะได้รับตำแหน่งโดยใช้ API ที่แตกต่างกันonScroll, onMomentumScrollEndฯลฯ ; หากคุณต้องการทราบดัชนีเพจคุณสามารถคำนวณได้โดยใช้ค่าออฟเซ็ต

 <ScrollView 
    pagingEnabled={true}
    onMomentumScrollEnd={this._onMomentumScrollEnd}>
    {pages}
 </ScrollView> 

  _onMomentumScrollEnd = ({ nativeEvent }: any) => {
   // the current offset, {x: number, y: number} 
   const position = nativeEvent.contentOffset; 
   // page index 
   const index = Math.round(nativeEvent.contentOffset.x / PAGE_WIDTH);

   if (index !== this.state.currentIndex) {
     // onPageDidChanged
   }
 };

ใน iOS ความสัมพันธ์ระหว่าง ScrollView และพื้นที่ที่มองเห็นได้มีดังต่อไปนี้:

อ้างอิง: https://www.objc.io/issues/3-views/scroll-view/

นี่คือวิธีที่ทำให้ตำแหน่งการเลื่อนปัจจุบันปรากฏขึ้นจากมุมมอง สิ่งที่ฉันทำคือใช้ on scroll event listener และ scrollEventThrottle จากนั้นฉันจะส่งต่อเป็นเหตุการณ์เพื่อจัดการฟังก์ชั่นเลื่อนที่ฉันสร้างและอัปเดตอุปกรณ์ประกอบฉาก

 export default class Anim extends React.Component {
          constructor(props) {
             super(props);
             this.state = {
               yPos: 0,
             };
           }

        handleScroll(event){
            this.setState({
              yPos : event.nativeEvent.contentOffset.y,
            })
        }

        render() {
            return (
          <ScrollView onScroll={this.handleScroll.bind(this)} scrollEventThrottle={16} />
    )
    }
    }

การใช้ onScroll เข้าสู่การวนซ้ำแบบไม่มีที่สิ้นสุด onMomentumScrollEnd หรือ onScrollEndDrag แทนได้

สำหรับหน้านี้ฉันกำลังทำงานกับส่วนประกอบลำดับที่สูงขึ้นซึ่งใช้วิธีการข้างต้นเพื่อทำสิ่งนี้โดยทั่วไป จริงๆแล้วใช้เวลาเพียงเล็กน้อยเมื่อคุณลงลึกถึงรายละเอียดปลีกย่อยเช่นการจัดวางเริ่มต้นและการเปลี่ยนแปลงเนื้อหา ฉันจะไม่อ้างว่าทำ 'ถูกต้อง' แต่ในบางแง่ฉันจะพิจารณาคำตอบที่ถูกต้องเพื่อใช้ส่วนประกอบที่ทำสิ่งนี้อย่างรอบคอบและสม่ำเสมอ

ดู: ตอบสนองพื้นเมืองเพจเลื่อนมุมมอง ชอบคำติชมแม้ว่าฉันจะทำผิดทั้งหมดก็ตาม!

ฉันเชื่อว่าcontentOffsetจะให้วัตถุที่มีออฟเซ็ตการเลื่อนด้านซ้ายบน:

http://facebook.github.io/react-native/docs/scrollview.html#contentoffset