react native tab view

repo ถูกย้ายไปที่ https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view กรุณาเปิดปัญหาและดึงคำขอที่นั่น

ตอบโต้การดูแท็บดั้งเดิม

ส่วนประกอบมุมมองแท็บข้ามแพลตฟอร์มสำหรับ React Native นำไปใช้โดยใช้ react-native-pager-view บน Android & iOS และ Panresponder บนเว็บ MacOS และ Windows

• เรียกใช้แอพตัวอย่างเพื่อดูการทำงาน
• ชำระเงินตัวอย่าง/ โฟลเดอร์สำหรับซอร์สโค้ด

คุณสมบัติ

• ภาพเคลื่อนไหวและท่าทางที่ราบรื่น
• แท็บที่เลื่อนได้
• รองรับแถบแท็บทั้งด้านบนและด้านล่าง
• ตามข้อมูลจำเพาะการออกแบบวัสดุ
• ปรับแต่งได้สูง
• พิมพ์เต็มด้วย typeScript

การสาธิต

ตอบสนองความเข้ากันได้ของเนทีฟ

ในการใช้ไลบรารีนี้คุณต้องแน่ใจว่าคุณใช้ React Native เวอร์ชันที่ถูกต้อง หากคุณใช้ React Native รุ่นที่ต่ำกว่า 0.63 คุณจะต้องอัปเกรดก่อนที่จะพยายามใช้ไลบรารีนี้

เวอร์ชัน react-native-tab-view	เวอร์ชัน Native React ที่จำเป็น
2.xx	< 0.63
3.xx	>= 0.63

การติดตั้ง

เปิดเทอร์มินัลในรูทโครงการแล้วเรียกใช้:

yarn add react-native-tab-view

ตอนนี้เราต้องติดตั้ง react-native-pager-view หากคุณวางแผนที่จะสนับสนุน iOS และ Android

หากคุณใช้งาน Expo เพื่อให้แน่ใจว่าคุณได้รับไลบรารีเวอร์ชันที่เข้ากันได้ Run:

expo install react-native-pager-view

หากคุณไม่ได้ใช้งาน Expo ให้เรียกใช้สิ่งต่อไปนี้:

yarn add react-native-pager-view

เราทำเสร็จแล้ว! ตอนนี้คุณสามารถสร้างและเรียกใช้แอพบนอุปกรณ์/เครื่องจำลองของคุณ

เริ่มต้นอย่างรวดเร็ว

 import * as React from 'react' ;
import { View , useWindowDimensions } from 'react-native' ;
import { TabView , SceneMap } from 'react-native-tab-view' ;

const FirstRoute = ( ) => (
  < View style = { { flex : 1 , backgroundColor : '#ff4081' } } />
) ;

const SecondRoute = ( ) => (
  < View style = { { flex : 1 , backgroundColor : '#673ab7' } } />
) ;

const renderScene = SceneMap ( {
  first : FirstRoute ,
  second : SecondRoute ,
} ) ;

export default function TabViewExample ( ) {
  const layout = useWindowDimensions ( ) ;

  const [ index , setIndex ] = React . useState ( 0 ) ;
  const [ routes ] = React . useState ( [
    { key : 'first' , title : 'First' } ,
    { key : 'second' , title : 'Second' } ,
  ] ) ;

  return (
    < TabView
      navigationState = { { index , routes } }
      renderScene = { renderScene }
      onIndexChange = { setIndex }
      initialLayout = { { width : layout . width } }
    />
  ) ;
}

ลองตัวอย่างนี้ในของว่าง

ตัวอย่างเพิ่มเติมเกี่ยวกับของว่าง

• แถบแท็บแบบกำหนดเอง
• โหลดขี้เกียจ

การอ้างอิง API

แพ็คเกจส่งออกส่วนประกอบ TabView ซึ่งเป็นส่วนที่คุณใช้เพื่อแสดงผลมุมมองแท็บและส่วนประกอบ TabBar ซึ่งเป็นการใช้งานแท็บแท็บเริ่มต้น

TabView

ส่วนประกอบคอนเทนเนอร์ที่รับผิดชอบในการแสดงผลและการจัดการแท็บ ตามรูปแบบการออกแบบวัสดุตามค่าเริ่มต้น

การใช้งานขั้นพื้นฐานมีลักษณะเช่นนี้:

 < TabView
  navigationState = { { index , routes } }
  onIndexChange = { setIndex }
  renderScene = { SceneMap ( {
    first : FirstRoute ,
    second : SecondRoute ,
  } ) }
/> 

Tabview อุปกรณ์ประกอบฉาก

navigationState ( required )

ระบุสำหรับมุมมองแท็บ สถานะควรมีคุณสมบัติดังต่อไปนี้:

• index : ตัวเลขที่แสดงถึงดัชนีของเส้นทางที่ใช้งานอยู่ในอาร์เรย์ routes
• routes : อาร์เรย์ที่มีรายการวัตถุเส้นทางที่ใช้สำหรับการแสดงผลแท็บ

วัตถุเส้นทางแต่ละเส้นทางควรมีคุณสมบัติต่อไปนี้:

• key : คีย์ที่ไม่ซ้ำกันในการระบุเส้นทาง (จำเป็น)
• title : ชื่อเรื่องสำหรับเส้นทางที่จะแสดงในแถบแท็บ
• icon : ไอคอนสำหรับเส้นทางที่จะแสดงในแถบแท็บ
• accessibilityLabel : ฉลากการเข้าถึงสำหรับปุ่มแท็บ
• testID : ID ทดสอบสำหรับปุ่มแท็บ

ตัวอย่าง:

 {
  index : 1 ,
  routes : [
    { key : 'music' , title : 'Music' } ,
    { key : 'albums' , title : 'Albums' } ,
    { key : 'recents' , title : 'Recents' } ,
    { key : 'purchased' , title : 'Purchased' } ,
  ]
}

TabView เป็นส่วนประกอบที่ควบคุมซึ่งหมายความว่าจะต้องมีการอัปเดต index ผ่านการเรียกกลับ onIndexChange

onIndexChange ( required )

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

renderScene ( required )

การโทรกลับซึ่งส่งคืนองค์ประกอบปฏิกิริยาเพื่อแสดงผลเป็นหน้าสำหรับแท็บ รับวัตถุที่มีเส้นทางเป็นอาร์กิวเมนต์:

 const renderScene = ( { route , jumpTo } ) => {
  switch ( route . key ) {
    case 'music' :
      return < MusicRoute jumpTo = { jumpTo } /> ;
    case 'albums' :
      return < AlbumsRoute jumpTo = { jumpTo } /> ;
  }
} ;

คุณต้องตรวจสอบให้แน่ใจว่าเส้นทางแต่ละเส้นทางของคุณใช้งาน shouldComponentUpdate เพื่อปรับปรุงประสิทธิภาพ เพื่อให้ง่ายต่อการระบุส่วนประกอบคุณสามารถใช้ SceneMap Helper

SceneMap ใช้วัตถุด้วยการแมปของ route.key เพื่อตอบสนองส่วนประกอบและส่งคืนฟังก์ชั่นเพื่อใช้กับ renderScene Prop

 import { SceneMap } from 'react-native-tab-view' ;

...

const renderScene = SceneMap ( {
  music : MusicRoute ,
  albums : AlbumsRoute ,
} ) ;

การระบุส่วนประกอบด้วยวิธีนี้ง่ายกว่าและดูแลการใช้วิธีการ shouldComponentUpdate

แต่ละฉากได้รับอุปกรณ์ประกอบฉากต่อไปนี้:

• route : เส้นทางปัจจุบันที่แสดงโดยส่วนประกอบ
• jumpTo : วิธีข้ามไปยังแท็บอื่นใช้ route.key เป็นข้อโต้แย้ง
• position : โหนดภาพเคลื่อนไหวซึ่งแสดงถึงตำแหน่งปัจจุบัน

วิธี jumpTo สามารถใช้เพื่อนำทางไปยังแท็บอื่น ๆ โดยทางโปรแกรม:

 this . props . jumpTo ( 'albums' ) ;

ฉากทั้งหมดที่แสดงด้วย SceneMap ได้รับการปรับให้เหมาะสมโดยใช้ React.PureComponent และอย่าแสดงผลอีกครั้งเมื่ออุปกรณ์ประกอบฉากหรือสถานะของผู้ปกครองเปลี่ยนไป หากคุณต้องการการควบคุมเพิ่มเติมเกี่ยวกับวิธีการอัปเดตฉากของคุณ (เช่น - ทริกเกอร์การแสดงผลอีกครั้งแม้ว่า navigationState ไม่เปลี่ยนแปลง) ให้ใช้ renderScene โดยตรงแทนที่จะใช้ SceneMap

สำคัญ: อย่า ผ่านฟังก์ชั่นอินไลน์ไปยัง SceneMap ตัวอย่างเช่นอย่าทำสิ่งต่อไปนี้:

 SceneMap ( {
  first : ( ) => < FirstRoute foo = { this . props . foo } /> ,
  second : SecondRoute ,
} ) ;

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

หากคุณต้องการผ่านอุปกรณ์ประกอบฉากเพิ่มเติมให้ใช้ฟังก์ชั่น renderScene ที่กำหนดเอง:

 const renderScene = ( { route } ) => {
  switch ( route . key ) {
    case 'first' :
      return < FirstRoute foo = { this . props . foo } /> ;
    case 'second' :
      return < SecondRoute /> ;
    default :
      return null ;
  }
} ; 

renderTabBar

การโทรกลับซึ่งส่งคืนองค์ประกอบปฏิกิริยาที่กำหนดเองเพื่อใช้เป็นแถบแท็บ:

 import { TabBar } from 'react-native-tab-view' ;

...

< TabView
  renderTabBar = { props => < TabBar { ... props } /> }
  . . .
/ >

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

 < TabView
  renderTabBar = { ( ) => null }
  . . .
/ > 

tabBarPosition

ตำแหน่งของแถบแท็บในมุมมองแท็บ ค่าที่เป็นไปได้คือ 'top' และ 'bottom' ค่าเริ่มต้นเป็น 'top'

lazy

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

โดยค่าเริ่มต้นทุกฉากจะแสดงผลเพื่อมอบประสบการณ์การปัดที่ราบรื่นขึ้น แต่คุณอาจต้องการเลื่อนการแสดงฉากที่ไม่ได้โฟกัสจนกว่าผู้ใช้จะเห็นพวกเขา เพื่อเปิดใช้งานการแสดงผลขี้เกียจสำหรับฉากใดฉากหนึ่งให้กลับมา true จาก getLazy สำหรับ route นั้น:

 < TabView
  lazy = { ( { route } ) => route . name === 'Albums' }
  . . .
/ >

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

นอกจากนี้คุณยังสามารถผ่านบูลีนเพื่อเปิดใช้งานขี้เกียจสำหรับทุกฉาก:

 < TabView
  lazy
/> 

lazyPreloadDistance

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

renderLazyPlaceholder

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

มุมมองนี้มักจะแสดงเฉพาะในเสี้ยววินาทีเท่านั้น ให้น้ำหนักเบา

โดยค่าเริ่มต้นจะแสดงผล null

keyboardDismissMode

สตริงระบุว่าคีย์บอร์ดถูกไล่ออกหรือไม่เพื่อตอบสนองต่อท่าทางการลาก ค่าที่เป็นไปได้คือ:

• 'auto' (ค่าเริ่มต้น): คีย์บอร์ดจะถูกยกเลิกเมื่อดัชนีเปลี่ยนไป
• 'on-drag' : คีย์บอร์ดจะถูกไล่ออกเมื่อการลากเริ่มขึ้น
• 'none' : การลากไม่ยกเลิกแป้นพิมพ์

swipeEnabled

บูลีนระบุว่าจะเปิดใช้งานท่าทางปัดหรือไม่ ท่าทางปัดจะเปิดใช้งานโดยค่าเริ่มต้น การผ่าน false จะปิดการใช้งานท่าทางการปัด แต่ผู้ใช้ยังสามารถสลับแท็บได้โดยการกดแถบแท็บ

animationEnabled

เปิดใช้งานภาพเคลื่อนไหวเมื่อเปลี่ยนแท็บ โดยค่าเริ่มต้นมันเป็นเรื่องจริง

onSwipeStart

การโทรกลับซึ่งเรียกว่าเมื่อท่าทางปัดเริ่มต้นเช่นผู้ใช้สัมผัสหน้าจอและเลื่อนมัน

onSwipeEnd

การโทรกลับซึ่งเรียกว่าเมื่อท่าทางการปัดสิ้นสุดลงเช่นผู้ใช้ยกนิ้วขึ้นจากหน้าจอหลังจากท่าทางปัด

initialLayout

วัตถุที่มีความสูงและความกว้างเริ่มต้นของหน้าจอ การผ่านสิ่งนี้จะปรับปรุงประสิทธิภาพการแสดงผลเริ่มต้น สำหรับแอพส่วนใหญ่นี่เป็นค่าเริ่มต้นที่ดี:

 < TabView
  initialLayout = { { width : Dimensions . get ( 'window' ) . width } }
  . . .
/ > 

sceneContainerStyle

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

pagerStyle

สไตล์ที่จะนำไปใช้กับมุมมองเพจเจอร์ห่อทุกฉาก

style

สไตล์ที่จะนำไปใช้กับคอนเทนเนอร์มุมมองแท็บ

TabBar

แท็บแท็บธีมการออกแบบวัสดุ ในการปรับแต่งแถบแท็บคุณจะต้องใช้ renderTabBar prop ของ TabView เพื่อแสดง TabBar และผ่านอุปกรณ์ประกอบฉากเพิ่มเติม

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

 const renderTabBar = props => (
  < TabBar
    { ... props }
    indicatorStyle = { { backgroundColor : 'white' } }
    style = { { backgroundColor : 'pink' } }
  />
) ;

//...


return (
  < TabView
    renderTabBar = { renderTabBar }
    . . .
  / >
);

อุปกรณ์ประกอบฉาก TABBAR

getLabelText

ฟังก์ชั่นที่ใช้วัตถุที่มีเส้นทางปัจจุบันและส่งคืนข้อความฉลากสำหรับแท็บ ใช้ route.title โดยค่าเริ่มต้น

 < TabBar
  getLabelText = { ( { route } ) => route . title }
  . . .
/ > 

getAccessible

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

getAccessibilityLabel

ฟังก์ชั่นที่ใช้วัตถุที่มีเส้นทางปัจจุบันและส่งคืนฉลากการเข้าถึงสำหรับปุ่มแท็บ ใช้ route.accessibilityLabel โดยค่าเริ่มต้นหากระบุมิฉะนั้นจะใช้ชื่อเส้นทาง

 < TabBar
  getAccessibilityLabel = { ( { route } ) => route . accessibilityLabel }
  . . .
/ > 

getTestID

ฟังก์ชั่นที่ใช้วัตถุที่มีเส้นทางปัจจุบันและส่งคืนรหัสทดสอบสำหรับปุ่มแท็บเพื่อค้นหาปุ่มแท็บนี้ในการทดสอบ ใช้ route.testID โดยค่าเริ่มต้น

 < TabBar
  getTestID = { ( { route } ) => route . testID }
  . . .
/ > 

renderIcon

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

 < TabBar
  renderIcon = { ( { route , focused , color } ) => (
    < Icon
      name = { focused ? 'albums' : 'albums-outlined' }
      color = { color }
    />
  ) }
  . . .
/ > 

renderLabel

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

 < TabBar
  renderLabel = { ( { route , focused , color } ) => (
    < Text style = { { color , margin : 8 } } >
      { route . title }
    </ Text >
  ) }
  . . .
/ > 

renderTabBarItem

ฟังก์ชั่นที่ใช้วัตถุ TabBarItemProps และส่งคืนองค์ประกอบปฏิกิริยาที่กำหนดเองที่จะใช้เป็นปุ่มแท็บ

renderIndicator

ฟังก์ชั่นที่ใช้วัตถุที่มีเส้นทางปัจจุบันและส่งคืนองค์ประกอบปฏิกิริยาแบบกำหนดเองที่จะใช้เป็นตัวบ่งชี้แท็บ

renderBadge

ฟังก์ชั่นที่ใช้วัตถุที่มีเส้นทางปัจจุบันและส่งคืนองค์ประกอบปฏิกิริยาแบบกำหนดเองที่จะใช้เป็นตรา

onTabPress

ฟังก์ชั่นเพื่อดำเนินการบนแท็บกด มันได้รับฉากสำหรับแท็บที่กดซึ่งมีประโยชน์สำหรับสิ่งต่าง ๆ เช่นเลื่อนไปด้านบน

โดยค่าเริ่มต้นแท็บกดจะสลับแท็บด้วย เพื่อป้องกันพฤติกรรมนี้คุณสามารถเรียก preventDefault :

 < TabBar
  onTabPress = { ( { route , preventDefault } ) => {
    if ( route . key === 'home' ) {
      preventDefault ( ) ;

      // Do something else
    }
  } }
  . . .
/ > 

onTabLongPress

ฟังก์ชั่นเพื่อดำเนินการบนแท็บยาวกดใช้สำหรับสิ่งต่าง ๆ เช่นการแสดงเมนูที่มีตัวเลือกเพิ่มเติม

activeColor

สีที่กำหนดเองสำหรับไอคอนและฉลากในแท็บที่ใช้งานอยู่

inactiveColor

สีที่กำหนดเองสำหรับไอคอนและฉลากในแท็บที่ไม่ได้ใช้งาน

pressColor

สีสำหรับวัสดุระลอกคลื่น (Android> = 5.0 เท่านั้น)

pressOpacity

ความทึบสำหรับแท็บกด (iOS และ Android <5.0 เท่านั้น)

scrollEnabled

บูลีนระบุว่าจะทำให้แถบแท็บเลื่อนได้หรือไม่

หากคุณตั้งค่า scrollEnabled เป็น true คุณควรระบุ width ใน tabStyle เพื่อปรับปรุงการแสดงผลเริ่มต้น

bounces

บูลีนระบุว่าแถบแท็บเด้งเมื่อเลื่อน

tabStyle

สไตล์ที่จะนำไปใช้กับรายการแท็บแต่ละรายการในแถบแท็บ

โดยค่าเริ่มต้นรายการแท็บทั้งหมดจะใช้ความกว้างที่คำนวณล่วงหน้าได้ตามความกว้างของคอนเทนเนอร์ หากคุณต้องการให้พวกเขาใช้ความกว้างดั้งเดิมของพวกเขาคุณสามารถระบุ width: 'auto' ใน tabStyle

indicatorStyle

สไตล์ที่จะนำไปใช้กับตัวบ่งชี้ที่ใช้งานอยู่

indicatorContainerStyle

สไตล์ที่จะนำไปใช้กับมุมมองคอนเทนเนอร์สำหรับตัวบ่งชี้

labelStyle

สไตล์ที่จะนำไปใช้กับฉลากรายการแท็บ

contentContainerStyle

สไตล์ที่จะนำไปใช้กับคอนเทนเนอร์ด้านในสำหรับแท็บ

style

สไตล์ที่จะนำไปใช้กับแท็บบาร์คอนเทนเนอร์

gap

กำหนดระยะห่างระหว่างแท็บ

testID

ID ทดสอบสำหรับ tabbar สามารถใช้สำหรับการเลื่อนแถบแท็บในการทดสอบ

ใช้กับห้องสมุดอื่น ๆ

นำทางการนำทาง

หากคุณต้องการรวมมุมมองแท็บเข้ากับระบบการนำทางของ React Navigation เช่นต้องการนำทางไปยังแท็บโดยใช้ navigation.navigate ฯลฯ คุณสามารถใช้การรวมอย่างเป็นทางการต่อไปนี้:

• @React-Navigation/วัสดุด้านบนสุดสำหรับการนำทางปฏิกิริยา 5 & 6
• React-Navigation-Tabs สำหรับการนำทางปฏิกิริยา 4

โปรดทราบว่าฟังก์ชันบางอย่างไม่สามารถใช้ได้กับการรวม Navigation 4 React เนื่องจากข้อ จำกัด ในการนำทางปฏิกิริยา ตัวอย่างเช่นมันเป็นไปได้ที่จะเปลี่ยนแท็บที่แสดงผลแบบไดนามิก

เคล็ดลับการเพิ่มประสิทธิภาพ

หลีกเลี่ยงการแสดงซ้ำที่ไม่จำเป็น

ฟังก์ชั่น renderScene เรียกว่าทุกครั้งที่ดัชนีเปลี่ยนแปลง หากฟังก์ชั่น renderScene ของคุณมีราคาแพงมันเป็นความคิดที่ดีที่จะย้ายแต่ละเส้นทางไปยังส่วนประกอบแยกต่างหากหากพวกเขาไม่ได้ขึ้นอยู่กับดัชนีและใช้ shouldComponentUpdate หรือ React.memo ในส่วนประกอบเส้นทางของคุณเพื่อป้องกันการแสดงซ้ำที่ไม่จำเป็น

ตัวอย่างเช่นแทน:

 const renderScene = ( { route } ) => {
  switch ( route . key ) {
    case 'home' :
      return (
        < View style = { styles . page } >
          < Avatar />
          < NewsFeed />
        </ View >
      ) ;
    default :
      return null ;
  }
} ;

ทำสิ่งต่อไปนี้:

 const renderScene = ( { route } ) => {
  switch ( route . key ) {
    case 'home' :
      return < HomeComponent /> ;
    default :
      return null ;
  }
} ;

โดยที่ <HomeComponent /> เป็น PureComponent หากคุณใช้ส่วนประกอบคลาส:

 export default class HomeComponent extends React . PureComponent {
  render ( ) {
    return (
      < View style = { styles . page } >
        < Avatar />
        < NewsFeed />
      </ View >
    ) ;
  }
}

หรือห่อด้วย React.memo หากคุณใช้ส่วนประกอบฟังก์ชัน:

 function HomeComponent ( ) {
  return (
    < View style = { styles . page } >
      < Avatar />
      < NewsFeed />
    </ View >
  ) ;
}

export default React . memo ( HomeComponent ) ;

หลีกเลี่ยงการหน่วงเวลาหนึ่งเฟรม

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

ตัวอย่างเช่นผ่าน initialLayout ไปนี้ไปยัง TabView :

 const initialLayout = {
  height : 0 ,
  width : Dimensions . get ( 'window' ) . width ,
} ;

มุมมองแท็บจะยังคงตอบสนองต่อการเปลี่ยนแปลงในมิติและปรับตามลำดับเพื่อรองรับสิ่งต่าง ๆ เช่นการเปลี่ยนแปลงการวางแนว

เพิ่มประสิทธิภาพเส้นทางจำนวนมาก

หากคุณมีเส้นทางจำนวนมากโดยเฉพาะภาพอาจทำให้ภาพเคลื่อนไหวช้าลงมาก คุณสามารถแสดงเส้นทางที่ จำกัด ได้แทน

ตัวอย่างเช่นทำสิ่งต่อไปนี้เพื่อแสดงผลเพียง 2 เส้นทางในแต่ละด้าน:

 const renderScene = ( { route } ) => {
  if ( Math . abs ( index - routes . indexOf ( route ) ) > 2 ) {
    return < View /> ;
  }

  return < MySceneComponent route = { route } /> ;
} ;

หลีกเลี่ยงการเรนเดอร์ Tabview ภายใน ScrollView

การทำ TabView ภายใน ScrollView แนวตั้งจะปิดการใช้งานการปรับให้เหมาะสมในส่วนประกอบ FlatList ที่แสดงใน TabView ดังนั้นหลีกเลี่ยงการทำถ้าเป็นไปได้

ใช้อุปกรณ์ประกอบฉาก lazy และ renderLazyPlaceholder

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

การบริจาค

ในขณะที่กำลังพัฒนาคุณสามารถเรียกใช้แอพตัวอย่างเพื่อทดสอบการเปลี่ยนแปลงของคุณ

ตรวจสอบให้แน่ใจว่ารหัสของคุณผ่าน TypeScript และ Eslint เรียกใช้สิ่งต่อไปนี้เพื่อตรวจสอบ:

yarn typescript
yarn lint

ในการแก้ไขข้อผิดพลาดในการจัดรูปแบบให้เรียกใช้สิ่งต่อไปนี้:

yarn lint -- --fix

อย่าลืมเพิ่มการทดสอบสำหรับการเปลี่ยนแปลงของคุณถ้าเป็นไปได้