View

View 是用於建構 UI 最基礎的組件，它是一個容器，支援使用 flexbox 進行版面配置、樣式、一些觸控處理和無障礙控制。無論 React Native 運行在哪個平台上，View 都直接對應到原生視圖的等效組件，例如 UIView、<div>、android.view 等。

View 設計為可巢狀於其他視圖內，並且可以有 0 到多個任何類型的子組件。

這個範例建立了一個 View，它包裹著兩個帶有顏色的方塊和一個文字組件，並以水平列和內距排列。

View 的設計目的是與 StyleSheet 一起使用，以提高清晰度和效能，儘管也支援內聯樣式。

合成觸控事件

對於 View 的響應器屬性（例如 onResponderMove），傳遞給它們的合成觸控事件格式為 PressEvent。

參考

Props

`accessibilityActions`

無障礙操作允許輔助技術以程式化的方式調用組件的操作。accessibilityActions 屬性應包含操作物件的列表。每個操作物件應包含欄位名稱和標籤。

請參閱無障礙指南以取得更多資訊。

類型
array

`accessibilityElementsHidden`
iOS

一個值，指示此無障礙元素中包含的無障礙元素是否隱藏。預設值為 false。

請參閱無障礙指南以取得更多資訊。

類型
bool

`accessibilityHint`

無障礙提示有助於使用者了解當他們對無障礙元素執行操作時會發生什麼，特別是在結果從無障礙標籤不明顯時。

類型
string

`accessibilityLanguage`
iOS

一個值，指示當使用者與元素互動時，螢幕閱讀器應使用的語言。它應遵循 BCP 47 規範。

請參閱 iOS accessibilityLanguage 文件以取得更多資訊。

類型
string

`accessibilityIgnoresInvertColors`
iOS

一個值，指示當顏色反轉開啟時，此視圖是否應反轉。值為 true 將告訴視圖即使顏色反轉開啟也不要反轉。

請參閱無障礙指南以取得更多資訊。

類型
bool

`accessibilityLabel`

覆寫當使用者與元素互動時，螢幕閱讀器讀取的文字。預設情況下，標籤是透過遍歷所有子組件並累積所有以空格分隔的 Text 節點來建構的。

類型
string

`accessibilityLiveRegion`
Android

向無障礙服務指示當此視圖變更時，是否應通知使用者。僅適用於 Android API >= 19。可能的值

'none' - 無障礙服務不應宣告此視圖的變更。
'polite' - 無障礙服務應宣告此視圖的變更。
'assertive' - 無障礙服務應中斷正在進行的語音，立即宣告此視圖的變更。

請參閱 Android View 文件以供參考。

類型
enum('none', 'polite', 'assertive')

`accessibilityRole`

accessibilityRole 向輔助技術的使用者傳達組件的用途。

accessibilityRole 可以是以下之一

'none' - 當元素沒有角色時使用。
'button' - 當元素應被視為按鈕時使用。
'link' - 當元素應被視為連結時使用。
'search' - 當文字欄位元素也應被視為搜尋欄位時使用。
'image' - 當元素應被視為圖像時使用。可以與按鈕或連結結合使用，例如。
'keyboardkey' - 當元素充當鍵盤按鍵時使用。
'text' - 當元素應被視為無法變更的靜態文字時使用。
'adjustable' - 當元素可以「調整」時使用（例如滑桿）。
'imagebutton' - 當元素應被視為按鈕且也是圖像時使用。
'header' - 當元素充當內容區段的標頭時使用（例如導覽列的標題）。
'summary' - 當應用程式首次啟動時，元素可用於提供應用程式當前狀況的快速摘要時使用。
'alert' - 當元素包含要呈現給使用者的重要文字時使用。
'checkbox' - 當元素代表一個可以勾選、取消勾選或具有混合勾選狀態的核取方塊時使用。
'combobox' - 當元素代表一個組合方塊時使用，該組合方塊允許使用者在多個選項中進行選擇。
'menu' - 當組件是選項選單時使用。
'menubar' - 當組件是多個選單的容器時使用。
'menuitem' - 用於表示選單中的項目。
'progressbar' - 用於表示指示任務進度的組件。
'radio' - 用於表示單選按鈕。
'radiogroup' - 用於表示一組單選按鈕。
'scrollbar' - 用於表示滾動條。
'spinbutton' - 用於表示打開選項列表的按鈕。
'switch' - 用於表示可以開啟和關閉的開關。
'tab' - 用於表示標籤頁。
'tablist' - 用於表示標籤頁列表。
'timer' - 用於表示計時器。
'toolbar' - 用於表示工具列（動作按鈕或組件的容器）。
'grid' - 與 ScrollView、VirtualizedList、FlatList 或 SectionList 一起使用，以表示網格。將網格的進入/退出宣告添加到 Android GridView。

類型
string

`accessibilityState`

向輔助技術的使用者描述組件的目前狀態。

請參閱無障礙指南以取得更多資訊。

類型
object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}`

`accessibilityValue`

表示組件的目前值。它可以是組件值的文字描述，或者對於基於範圍的組件（例如滑桿和進度條），它包含範圍資訊（最小值、當前值和最大值）。

請參閱無障礙指南以取得更多資訊。

類型
object: `{min: number, max: number, now: number, text: string}`

`accessibilityViewIsModal`
iOS

一個值，指示 VoiceOver 是否應忽略接收器的同層級視圖中的元素。預設值為 false。

請參閱無障礙指南以取得更多資訊。

類型
bool

`accessible`

當為 true 時，表示視圖是一個無障礙元素。預設情況下，所有可觸控的元素都是無障礙的。

`aria-busy`

指示元素正在被修改，並且輔助技術可能希望等到變更完成後再通知使用者更新。

類型	預設值
boolean	false

`aria-checked`

指示可檢查元素的狀態。此欄位可以採用布林值或 "mixed" 字串來表示混合核取方塊。

類型	預設值
boolean, 'mixed'	false

`aria-disabled`

指示元素是可感知的但已停用，因此它不可編輯或以其他方式操作。

類型	預設值
boolean	false

`aria-expanded`

指示可展開的元素目前是展開還是摺疊狀態。

類型	預設值
boolean	false

`aria-hidden`

指示此無障礙元素中包含的無障礙元素是否隱藏。

例如，在包含同層級視圖 A 和 B 的視窗中，將視圖 B 上的 aria-hidden 設定為 true 會導致 VoiceOver 忽略視圖 B 中的元素。

類型	預設值
boolean	false

`aria-label`

定義一個字串值，用於標記互動式元素。

類型
string

`aria-labelledby`
Android

識別標記它所應用元素的元素。aria-labelledby 的值應與相關元素的 nativeID 相符

tsx
<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

類型
string

`aria-live`
Android

指示元素將被更新，並描述使用者代理、輔助技術和使用者可以從即時區域期望的更新類型。

off 無障礙服務不應宣告此視圖的變更。
polite 無障礙服務應宣告此視圖的變更。
assertive 無障礙服務應中斷正在進行的語音，立即宣告此視圖的變更。

類型	預設值
enum(`'assertive'`, `'off'`, `'polite'`)	`'off'`

`aria-modal`
iOS

布林值，指示 VoiceOver 是否應忽略接收器的同層級視圖中的元素。優先於 accessibilityViewIsModal 屬性。

類型	預設值
boolean	false

`aria-selected`

指示可選元素目前是否被選取。

類型
boolean

`aria-valuemax`

表示基於範圍的組件（例如滑桿和進度條）的最大值。優先於 accessibilityValue 屬性中的 max 值。

類型
number

`aria-valuemin`

表示基於範圍的組件（例如滑桿和進度條）的最小值。優先於 accessibilityValue 屬性中的 min 值。

類型
number

`aria-valuenow`

表示基於範圍的組件（例如滑桿和進度條）的當前值。優先於 accessibilityValue 屬性中的 now 值。

類型
number

`aria-valuetext`

表示組件的文字描述。優先於 accessibilityValue 屬性中的 text 值。

類型
string

`collapsable`

僅用於佈局其子組件或以其他方式不繪製任何內容的視圖，可能會作為最佳化自動從原生層級結構中移除。將此屬性設定為 false 以停用此最佳化，並確保此 View 存在於原生視圖層級結構中。

類型	預設值
boolean	true

`collapsableChildren`

設定為 false 可防止視圖的直接子組件從原生視圖層級結構中移除，類似於在每個子組件上設定 collapsable={false} 的效果。

類型	預設值
boolean	true

`focusable`
Android

此 View 是否應可使用非觸控輸入裝置（例如，使用硬體鍵盤接收焦點）。

類型
boolean

`hitSlop`

這定義了觸控事件可以從視圖開始的距離。典型的介面指南建議觸控目標至少為 30 - 40 點/密度無關像素。

例如，如果可觸控視圖的高度為 20，則可以使用 hitSlop={{top: 10, bottom: 10, left: 0, right: 0}} 將可觸控高度擴展到 40

觸控區域永遠不會超出父視圖邊界，並且如果觸控擊中兩個重疊的視圖，則同層級視圖的 Z 索引始終優先。

類型
object: `{top: number, left: number, bottom: number, right: number}`

`id`

用於從原生類別中找到此視圖。優先於 nativeID 屬性。

這會停用此視圖的「僅佈局視圖移除」最佳化！

類型
string

`importantForAccessibility`
Android

控制視圖對於無障礙功能的重要性，即它是否觸發無障礙事件，以及是否向查詢螢幕的無障礙服務報告。僅適用於 Android。

可能的值

'auto' - 系統確定視圖對於無障礙功能是否重要 - 預設值（建議）。
'yes' - 視圖對於無障礙功能很重要。
'no' - 視圖對於無障礙功能不重要。
'no-hide-descendants' - 視圖對於無障礙功能不重要，其任何後代視圖也不重要。

請參閱 Android importantForAccessibility 文件以供參考。

類型
enum('auto', 'yes', 'no', 'no-hide-descendants')

`nativeID`

用於從原生類別中找到此視圖。

這會停用此視圖的「僅佈局視圖移除」最佳化！

類型
string

`needsOffscreenAlphaCompositing`

此 View 是否需要離屏渲染並與 alpha 合成，以保留 100% 正確的顏色和混合行為。預設值 (false) 會退回到繪製組件及其子組件，並將 alpha 應用於用於繪製每個元素的畫筆，而不是離屏渲染整個組件並以 alpha 值將其合成回來。如果您要設定不透明度的 View 具有多個重疊元素（例如多個重疊的 View 或文字和背景），則此預設值可能會很明顯且不希望出現。

離屏渲染以保留正確的 alpha 行為非常昂貴，並且對於非原生開發人員來說很難偵錯，這就是為什麼預設情況下不開啟它。如果您確實需要為動畫啟用此屬性，請考慮將其與 renderToHardwareTextureAndroid 結合使用，如果視圖內容是靜態的（即不需要在每個影格中重新繪製）。如果啟用該屬性，則此 View 將離屏渲染一次，保存在硬體紋理中，然後在每個影格中以 alpha 合成到螢幕上，而無需在 GPU 上切換渲染目標。

類型
bool

`nextFocusDown`
Android

指定當使用者向下導航時，下一個接收焦點的視圖。請參閱 Android 文件。

類型
number

`nextFocusForward`
Android

指定當使用者向前導航時，下一個接收焦點的視圖。請參閱 Android 文件。

類型
number

`nextFocusLeft`
Android

指定當使用者向左導航時，下一個接收焦點的視圖。請參閱 Android 文件。

類型
number

`nextFocusRight`
Android

指定當使用者向右導航時，下一個接收焦點的視圖。請參閱 Android 文件。

類型
number

`nextFocusUp`
Android

指定當使用者向上導航時，下一個接收焦點的視圖。請參閱 Android 文件。

類型
number

`onAccessibilityAction`

當使用者執行無障礙操作時調用。此函數的唯一參數是一個事件，其中包含要執行的操作名稱。

請參閱無障礙指南以取得更多資訊。

類型
function

`onAccessibilityEscape`
iOS

當 accessible 為 true 時，當使用者執行 escape 手勢時，系統將調用此函數。

類型
function

`onAccessibilityTap`
iOS

當 accessible 為 true 時，當使用者執行無障礙 tap 手勢時，系統將嘗試調用此函數。

類型
function

`onLayout`

在掛載和佈局變更時調用。

此事件會在佈局計算完成後立即觸發，但新的佈局可能尚未反映在螢幕上收到事件時，尤其是在佈局動畫正在進行時。

類型
`({nativeEvent: LayoutEvent}) => void`

`onMagicTap`
iOS

當 accessible 為 true 時，當使用者執行 magic tap 手勢時，系統將調用此函數。

類型
function

`onMoveShouldSetResponder`

此視圖是否要「聲明」觸控響應？當 View 不是響應器時，會針對 View 上的每個觸控移動呼叫此函數。

類型
`({nativeEvent: PressEvent}) => boolean`

`onMoveShouldSetResponderCapture`

如果父 View 想要阻止子 View 在移動時成為響應器，則它應該具有此處理程序，該處理程序返回 true。

類型
`({nativeEvent: PressEvent}) => boolean`

`onResponderGrant`

View 現在正在響應觸控事件。現在是突出顯示並向使用者顯示正在發生的事情的時候了。

在 Android 上，從此回呼返回 true 以防止任何其他原生組件成為響應器，直到此響應器終止。

類型
`({nativeEvent: PressEvent}) => void ｜ boolean`

`onResponderMove`

使用者正在移動手指。

類型
`({nativeEvent: PressEvent}) => void`

`onResponderReject`

另一個響應器已處於活動狀態，並且不會將其釋放給要求成為響應器的 View。

類型
`({nativeEvent: PressEvent}) => void`

`onResponderRelease`

在觸控結束時觸發。

類型
`({nativeEvent: PressEvent}) => void`

`onResponderTerminate`

響應器已從 View 中移除。可能是被其他視圖在呼叫 onResponderTerminationRequest 後移除，或者可能是被作業系統在未經請求的情況下移除（例如，在 iOS 上使用控制中心/通知中心時發生）

類型
`({nativeEvent: PressEvent}) => void`

`onResponderTerminationRequest`

另一個 View 想要成為響應器，並要求此 View 釋放其響應器。返回 true 允許其釋放。

類型
`({nativeEvent: PressEvent}) => void`

`onStartShouldSetResponder`

此視圖是否要在觸控開始時成為響應器？

類型
`({nativeEvent: PressEvent}) => boolean`

`onStartShouldSetResponderCapture`

如果父 View 想要阻止子 View 在觸控開始時成為響應器，則它應該具有此處理程序，該處理程序返回 true。

類型
`({nativeEvent: PressEvent}) => boolean`

`pointerEvents`

控制 View 是否可以成為觸控事件的目標。

'auto'：View 可以成為觸控事件的目標。
'none'：View 永遠不會成為觸控事件的目標。
'box-none'：View 永遠不會成為觸控事件的目標，但其子視圖可以。它的行為就像視圖在 CSS 中具有以下類別一樣

css
.box-none {
  pointer-events: none;
}
.box-none * {
  pointer-events: auto;
}

'box-only'：視圖可以成為觸控事件的目標，但其子視圖不能。它的行為就像視圖在 CSS 中具有以下類別一樣

css
.box-only {
  pointer-events: auto;
}
.box-only * {
  pointer-events: none;
}

類型
enum('box-none', 'none', 'box-only', 'auto')

`removeClippedSubviews`

這是 RCTView 公開的保留效能屬性，當有許多子視圖（其中大多數在螢幕外）時，對於滾動內容很有用。為了使此屬性有效，它必須應用於包含許多超出其邊界的子視圖的視圖。子視圖還必須具有 overflow: hidden，包含視圖（或其父視圖之一）也應如此。

類型
bool

`renderToHardwareTextureAndroid`
Android

此 View 是否應將自身（及其所有子組件）渲染到 GPU 上的單個硬體紋理中。

在 Android 上，這對於僅修改不透明度、旋轉、平移和/或縮放的動畫和互動很有用：在這些情況下，視圖不必重新繪製，並且不需要重新執行顯示列表。紋理可以重複使用並以不同的參數重新合成。缺點是這可能會佔用有限的視訊記憶體，因此應在互動/動畫結束時將此屬性設定回 false。

類型
bool

`role`

role 向輔助技術的使用者傳達組件的用途。優先於 accessibilityRole 屬性。

類型
Role

`shouldRasterizeIOS`
iOS

此 View 在合成之前是否應渲染為點陣圖。

在 iOS 上，這對於不修改此組件的尺寸及其子組件的動畫和互動很有用；例如，當平移靜態視圖的位置時，點陣化允許渲染器重複使用靜態視圖的快取點陣圖，並在每個影格期間快速合成它。

點陣化會產生一個離屏繪製通道，並且點陣圖會消耗記憶體。使用此屬性時請進行測試和測量。

類型
bool

`style`

類型
View 樣式

`tabIndex`
Android

此 View 是否應可使用非觸控輸入裝置（例如，使用硬體鍵盤接收焦點）。支援以下值

0 - 視圖可聚焦
-1 - 視圖不可聚焦

類型
enum(0, -1)

`testID`

用於在端對端測試中找到此視圖。

這會停用此視圖的「僅佈局視圖移除」最佳化！

類型
string

合成觸控事件
Props

合成觸控事件​

參考

Props​

accessibilityActions​

accessibilityElementsHidden iOS​

accessibilityHint​

accessibilityLanguage iOS​

accessibilityIgnoresInvertColors iOS​

accessibilityLabel​

accessibilityLiveRegion Android​

accessibilityRole​

accessibilityState​

accessibilityValue​

accessibilityViewIsModal iOS​

accessible​

aria-busy​

aria-checked​

aria-disabled​

aria-expanded​

aria-hidden​

aria-label​

aria-labelledby Android​

aria-live Android​

aria-modal iOS​

aria-selected​

aria-valuemax​

aria-valuemin​

aria-valuenow​

aria-valuetext​

collapsable​

collapsableChildren​

focusable Android​

hitSlop​

id​

importantForAccessibility Android​

nativeID​

needsOffscreenAlphaCompositing​

nextFocusDown Android​

nextFocusForward Android​

nextFocusLeft Android​

nextFocusRight Android​

nextFocusUp Android​

onAccessibilityAction​

onAccessibilityEscape iOS​

onAccessibilityTap iOS​

onLayout​

onMagicTap iOS​

onMoveShouldSetResponder​

onMoveShouldSetResponderCapture​

onResponderGrant​

onResponderMove​

onResponderReject​

onResponderRelease​

onResponderTerminate​

onResponderTerminationRequest​

onStartShouldSetResponder​

onStartShouldSetResponderCapture​

pointerEvents​

removeClippedSubviews​

renderToHardwareTextureAndroid Android​

role​

shouldRasterizeIOS iOS​

style​

tabIndex Android​

testID​

合成觸控事件

Props

`accessibilityActions`

`accessibilityElementsHidden`
iOS

`accessibilityHint`

`accessibilityLanguage`
iOS

`accessibilityIgnoresInvertColors`
iOS

`accessibilityLabel`

`accessibilityLiveRegion`
Android

`accessibilityRole`

`accessibilityState`

`accessibilityValue`

`accessibilityViewIsModal`
iOS

`accessible`

`aria-busy`

`aria-checked`

`aria-disabled`

`aria-expanded`

`aria-hidden`

`aria-label`

`aria-labelledby`
Android

`aria-live`
Android

`aria-modal`
iOS

`aria-selected`

`aria-valuemax`

`aria-valuemin`

`aria-valuenow`

`aria-valuetext`

`collapsable`

`collapsableChildren`

`focusable`
Android

`hitSlop`

`id`

`importantForAccessibility`
Android

`nativeID`

`needsOffscreenAlphaCompositing`

`nextFocusDown`
Android

`nextFocusForward`
Android

`nextFocusLeft`
Android

`nextFocusRight`
Android

`nextFocusUp`
Android

`onAccessibilityAction`

`onAccessibilityEscape`
iOS

`onAccessibilityTap`
iOS

`onLayout`

`onMagicTap`
iOS

`onMoveShouldSetResponder`

`onMoveShouldSetResponderCapture`

`onResponderGrant`

`onResponderMove`

`onResponderReject`

`onResponderRelease`

`onResponderTerminate`

`onResponderTerminationRequest`

`onStartShouldSetResponder`

`onStartShouldSetResponderCapture`

`pointerEvents`

`removeClippedSubviews`

`renderToHardwareTextureAndroid`
Android

`role`

`shouldRasterizeIOS`
iOS

`style`

`tabIndex`
Android

`testID`