React Native - การแบ่งหน้าของ ListViews ใน ScrollView?

ฉันมีส่วนประกอบ 3 ListView ภายในองค์ประกอบ ScrollView เดียวดังนี้:

<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>

ส่วนประกอบ Header มีเนื้อหาทั่วไปบางส่วนและยังมี 3 แท็บ ซึ่งทริกเกอร์ให้แสดง ListView ตามลำดับ

ปัญหาคือ ListView โดยที่ onEndReached={() => alert('load more 1')} ไม่เคยเรียกใช้การแจ้งเตือน ดังนั้นฉันจึงไม่สามารถโหลดเพิ่มได้อีกเมื่อฉันเลื่อนลงและกดจุดสิ้นสุดของมุมมองรายการ ลบการตัดคำ ScrollView และการแจ้งเตือนจะทำงาน แต่ Header ทั่วไปจะไม่เลื่อน เนื่องจากเราเพิ่งลบการตัดคำ ScrollView ส่วนหัวจำเป็นต้องเลื่อนด้วย listview ซึ่งเป็นสาเหตุที่ฉันรวมทุกอย่างที่ต้องเลื่อนไว้ใน ScrollView

หมายเหตุสำคัญ: ฉันไม่สามารถใช้ ListView กับ renderHeader={this.header} ได้จริงๆ สำหรับสถานการณ์นี้ เพราะถึงแม้ Header จะเลื่อน มันจะเรนเดอร์ Header ทั่วไปและ 3 แท็บใหม่สำหรับแต่ละ ListView แต่ละครั้งที่ ListView เรนเดอร์ แทนที่จะเป็นครั้งเดียว ดังนั้นการเรนเดอร์ Header ใหม่แต่ละครั้งสำหรับแต่ละ ListView จะไม่ถูกตัดออกจากแอป

กำลังมองหาวิธีแก้ไขปัญหานี้ โดยที่ Header เลื่อนด้วย listviews และ onEndReached ถูกทริกเกอร์สำหรับ ListView ที่มองเห็นได้


react-native react-native-scrollview react-native-listview
person Wonka    schedule 11.08.2016    source แหล่งที่มา
comment
คุณต้องการให้แท็บส่วนหัวเคลื่อนไหวเลยหรือไม่เมื่อสลับระหว่างแท็บเหล่านั้น (เช่น ตัวอย่างแสดงเส้นบนและล่างเป็นภาพเคลื่อนไหว)   -  person Luke Rhodes    schedule 07.09.2016
comment
นอกจากนี้ หากคุณไม่ต้องการให้ Header เคลื่อนไหว - เหตุใดจึงเป็นปัญหาสำหรับคุณหาก Header แสดงผลซ้ำในแต่ละ ListView ตราบใดที่สถานะยังคงอยู่   -  person Luke Rhodes    schedule 07.09.2016
comment
@Luke Rhodes ไม่จำเป็นต้องทำให้ส่วนหัวเคลื่อนไหวเมื่อเปลี่ยน แต่ฉันไม่ต้องการให้ส่วนหัวแสดงผลซ้ำสำหรับมุมมองรายการแต่ละรายการในการเปลี่ยนแปลงแท็บ เพราะมันจะแสดงเป็นสีขาวในตำแหน่งที่ส่วนหัวอยู่ในขณะที่มันแสดงผลซ้ำ แต่เฉพาะด้านล่างเท่านั้น parts (listview) คือสิ่งที่ควรเปลี่ยนแปลงพร้อมกับแท็บที่เหมาะสมที่เลือก   -  person Wonka    schedule 07.09.2016

คำตอบ (3)


arrow_upward
2
arrow_downward

ฉันคิดว่าคุณจะต้องแก้ไขปัญหานี้ด้วยการเปลี่ยนแหล่งข้อมูลในแต่ละ listView เพื่อตอบสนองต่อองค์ประกอบส่วนหัวที่ถูกเลือกแทนที่จะโหลด ListView ที่แตกต่างกันสามรายการ

getInitialState() {
    return {
        currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
    }
},
render() {
    return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}

เหตุผลเดียวที่คุณไม่ต้องการทำเช่นนี้คือถ้าคุณต้องการรักษาตำแหน่งการเลื่อนใน ListView ย่อยทั้งสามรายการ แต่นั่นจะไม่มีประโยชน์เพราะคุณต้องเลื่อนไปที่ด้านบนเสมอเพื่อเปลี่ยน ListView ที่คุณกำลังมองหา ยังไงก็ตาม

จากนั้นในฟังก์ชัน _renderHeader ของคุณ คุณจะแสดงผลตัวเลือกที่เติม currentList ด้วยข้อมูลที่แตกต่างกัน ขึ้นอยู่กับส่วนหัวที่เลือก

person frank    schedule 06.09.2016
comment
ใช่! ตอนนี้ส่วนหัวจะเลื่อนไปตามเนื้อหา โหลดมากขึ้นเมื่อฉันไปถึงจุดต่ำสุด และไม่กะพริบส่วนหัวเป็นสีขาวขณะเรนเดอร์ listview อีกครั้ง ทางออกที่ดี! ขอบคุณแฟรงค์ :) - person Wonka; 07.09.2016

arrow_upward
0
arrow_downward

ในการจัดสไตล์ คุณสามารถตั้งค่าตำแหน่งให้สัมพันธ์กับ top:0 และ left:0 ได้ ด้วยวิธีนี้มันจะยังคงนิ่งอยู่ด้านบน

<View>
<Header style={{position:"relative",top:0,left:0,height:30,width:Dimensions.get("window").width}} />
  <ListView />
  <ListView />
  <ListView />
 <Footer />
 </View>

ตัวเลือกที่สองซึ่งอาจใช้งานได้ใน scrollview คือการระบุความสูงสำหรับ ListView ทั้งสามรายการ

person while1    schedule 11.08.2016
comment
ขอบคุณสำหรับการตอบรับของคุณในขณะที่1. ตัวเลือกที่ 1 จะไม่เลื่อน Header ฉันคิดว่าเพราะมันไม่ได้อยู่ใน ScrollView และฉันต้องการให้ส่วนหัวเลื่อนออกไปเมื่อคุณเลื่อนลง ฉันหมายถึงแบบคงที่ว่าไม่ควรเรนเดอร์ใหม่ แต่ยังคงเลื่อนไปตามเนื้อหา ตัวเลือกที่ 2 เป็นขนาดไดนามิกและโหลดมากขึ้นตามที่คุณไป ดังนั้นจึงไม่แน่ใจว่าความสูงจะทำงานอย่างไร - person Wonka; 11.08.2016

arrow_upward
0
arrow_downward

คุณสามารถใช้ ScrollView::onScroll ได้ แต่อาจจะแฮ็กเล็กน้อย คุณจะต้องทราบขนาดของ listviews ของคุณ

ทำงานกับ ListView เท่านั้น

บางทีทางออกที่ดีที่สุดคือเล่นกับ ListView dataSource และฟังก์ชัน onEndReached

หากคุณอัปเดตชุดข้อมูลเมื่อมีการทริกเกอร์ ListView::onEndReached ฉันคิดว่าคุณสามารถเพิ่มองค์ประกอบเพิ่มเติมให้กับ ListView ของคุณได้ ด้วยวิธีนี้ คุณไม่จำเป็นต้องทำสิ่งที่แฮ็กด้วย ListViews ใน ScrollViews

person Julien Deniau    schedule 06.09.2016
comment
ปัญหาคืออาจเป็นความสูงแบบไดนามิกของรายการมุมมองรายการ (อาจมีความสูงแตกต่างกันเล็กน้อยสำหรับแต่ละองค์ประกอบ) ดังนั้นโซลูชันจึงต้องมีความยืดหยุ่น การทำงานกับ listviews เท่านั้นจะไม่เลื่อนส่วนหัวเช่นกัน โปรดดูหมายเหตุสำคัญที่เป็นปัญหาสำหรับส่วนหัวที่แสดงผลอีกครั้งอีกครั้งเมื่อใช้ listviews เท่านั้น - person Wonka; 07.09.2016