文件前端技術組件網頁設計 cli components CSS Facebook layout props React React Native Reactjs ReactNative style UI

【React Native】文件翻譯閱讀紀錄 - Components(組件) - View

by Fu - 上午9:00

Facebook Open Source React Native

View

構建UI的最基本組件是View，它是一個支持flexbox，樣式，一些觸摸處理和可訪問性控件的佈局的容器。在運行React Native的任何平台上直接查看映射到等效的本機視圖，無論是UIView，<div>，android.view等。

View設計為嵌套在其他視圖中，並且可以包含0到多個任何類型的子項。

此示例創建一個View，它使用填充包裝兩個彩色框和一行文本組件。

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          height: 100,
          padding: 20,
        }}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

雖然也支持內聯樣式，但視圖旨在與StyleSheet一起使用以獲得清晰度和性能。

合成觸摸事件

對於View響應者道具（例如onResponderMove），傳遞給它們的合成觸摸事件具有以下形式：

nativeEvent
- changedTouches - 自上次事件以來已更改的所有觸摸事件的數組。
- identifier - 觸摸的ID。.
- locationX - 觸摸的X位置，相對於元素。
- locationY -觸摸的Y位置，相對於元素。
- pageX - 觸摸的X位置，相對於根元素。
- pageY - 觸摸的Y位置，相對於根元素。
- target -接收觸摸事件的元素的節點ID。
- timestamp - 觸摸的時間標識符，用於速度計算。
- touches - 屏幕上所有當前觸摸的數組。

Props

參考

Props

`onStartShouldSetResponder`

這個視圖是否想要在觸摸開始時成為響應者？

View.props.onStartShouldSetResponder :( event）=> [true | false]，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`accessibilityLabel`

當用戶與元素交互時，覆蓋屏幕閱讀器讀取的文本。默認情況下，標記是通過遍歷所有子項並累積由空格分隔的所有Text節點來構造的。

TYPE	REQUIRED
node	No

`hitSlop`

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

例如，如果可觸摸視圖的高度為20，則可觸摸高度可以擴展為40，其中hitSlop = {{top：10，bottom：10，left：0，right：0}}

觸摸區域永遠不會超出父視圖邊界，並且如果觸摸觸及兩個重疊視圖，則兄弟視圖的Z-index始終優先。

TYPE	REQUIRED
object: {top: number, left: number, bottom: number, right: number}	No

`nativeID`

用於從本機類中查找此視圖。

這會禁用此視圖的“僅佈局視圖刪除”優化！

TYPE	REQUIRED
string	No

`onAccessibilityTap`

當accessible為true時，系統將在用戶執行輔助功能點擊手勢時嘗試調用此功能。

TYPE	REQUIRED
function	No

`onLayout`

在mount和layout更改時調用：

{nativeEvent: { layout: {x, y, width, height}}}

一旦計算了佈局，就會立即觸發此事件，但是在接收到事件時，新佈局可能尚未反映在屏幕上，尤其是在佈局動畫正在進行時。

TYPE	REQUIRED
function	No

`onMagicTap`

當access為true時，系統將在用戶執行魔術敲擊手勢時調用此功能。

TYPE	REQUIRED
function	No

`onMoveShouldSetResponder`

這種觀點是否要“聲稱”觸摸響應？當視圖不是響應者時，對於視圖上的每次觸摸移動都會調用此方法。

View.props.onMoveShouldSetResponder :( event）=> [true | false]，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`onMoveShouldSetResponderCapture`

如果父View想要阻止子View在移動中成為響應者，那麼它應該具有返回true的處理程序。

View.props.onMoveShouldSetResponderCapture :( event）=> [true | false]，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`onResponderGrant`

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

View.props.onResponderGrant :( event）=> {}，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`onResponderMove`

用戶正在移動他們的手指。

View.props.onResponderMove：（event）=> {}，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`onResponderReject`

另一個響應者已經處於活動狀態，並且不會將其發佈到該視圖，要求成為響應者。

View.props.onResponderReject：（event）=> {}，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`onResponderRelease`

在觸摸結束時被觸發。

View.props.onResponderRelease :( event）=> {}，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`onResponderTerminate`

響應者已從視圖中刪除。在調用onResponderTerminationRequest之後可能被其他視圖佔用，或者可能在沒有詢問的情況下被操作系統佔用（例如，在iOS上的控制中心/通知中心發生）

View.props.onResponderTerminate：（event）=> {}，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`onResponderTerminationRequest`

其他一些View希望成為響應者，並要求此View發布其響應者。返回true允許其釋放。

View.props.onResponderTerminationRequest：（event）=> {}，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`accessible`

如果為true，則表示視圖是輔助功能元素。默認情況下，可以訪問所有可觸摸元素。

TYPE	REQUIRED
bool	No

`onStartShouldSetResponderCapture`

如果父View想要阻止子View在觸摸開始時成為響應者，那麼它應該具有返回true的處理程序。

View.props.onStartShouldSetResponderCapture :( event）=> [true | false]，其中event是如上所述的合成觸摸事件。

TYPE	REQUIRED
function	No

`pointerEvents`

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

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

.box-none {
     pointer-events: none;
}
.box-none * {
     pointer-events: all;
}

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

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

由於pointerEvents不會影響佈局/外觀，並且我們已經通過添加其他模式而偏離規範，因此我們選擇不在樣式上包含pointerEvents。在某些平台上，我們無論如何都需要將它實現為className。使用樣式與否是平台的實現細節。

TYPE	REQUIRED
enum('box-none', 'none', 'box-only', 'auto')	No

`removeClippedSubviews`

這是RCTView公開的特殊性能屬性，當有許多子視圖（大多數是在屏幕外）時，它可用於滾動內容。要使此屬性有效，必須將其應用於包含許多超出其邊界的子視圖的視圖。子視圖還必須具有溢出：隱藏，包含視圖（或其中一個超視圖）也應如此。

TYPE	REQUIRED
bool	No

`style`

TYPE	REQUIRED
view styles	No

`testID`

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

這會禁用此視圖的“僅佈局視圖刪除”優化！

TYPE	REQUIRED
string	No

`accessibilityComponentType`

表示將UI組件視為本機組件的輔助功能服務。僅適用於Android。

可能的值是以下之一：

'none'
'button'
'radiobutton_checked'
'radiobutton_unchecked'

TYPE	REQUIRED	PLATFORM
AccessibilityComponentTypes	No	Android

`accessibilityLiveRegion`

向可訪問性服務指示在此視圖更改時是否應通知用戶。適用於Android API> = 19。可能的值：

'none' - 助功能服務不應宣布對此視圖的更改。
'polite'- 輔助功能服務應宣布對此視圖的更改。
'assertive' - 無障礙服務應該中斷正在進行的語音，以立即宣布對此視圖的更改。

請參閱 Android View docs 文檔以供參考。

TYPE	REQUIRED	PLATFORM
enum('none', 'polite', 'assertive')	No	Android

`collapsable`

僅用於佈置其子項或不繪製任何內容的視圖可以作為優化從本機層次結構中自動刪除。將此屬性設置為false可禁用此優化，並確保此視圖存在於本機視圖層次結構中。

TYPE	REQUIRED	PLATFORM
bool	No	Android

`importantForAccessibility`

控制視圖對可訪問性的重要性，如果它觸發可訪問性事件，並且是否向可查詢屏幕的輔助功能服務報告。僅適用於Android。

可能的值：

'auto' - 系統確定視圖對於輔助功能是否重要 - 默認（推薦）。
'yes' - 視圖對於可訪問性很重要。
'no' - 視圖對可訪問性並不重要。
'no-hide-descendants' - 圖對於可訪問性並不重要，也不是它的任何後代視圖。

請參閱 Android importantForAccessibility docs 文檔以供參考。

TYPE	REQUIRED	PLATFORM
enum('auto', 'yes', 'no', 'no-hide-descendants')	No	Android

`needsOffscreenAlphaCompositing`

此視圖是否需要在屏幕外渲染並使用alpha合成，以便保留100％正確的顏色和混合行為。默認值（false）回退到繪製組件及其子組件時，將alpha應用於用於繪製每個元素的繪製，而不是在屏幕外渲染完整組件並使用alpha值將其合成。在您設置不透明度的視圖具有多個重疊元素（例如，多個重疊視圖，或文本和背景）的情況下，此默認值可能會顯而易見且不受歡迎。

在屏幕外渲染以保留正確的alpha行為非常昂貴且難以為非本機開發人員調試，這就是默認情況下不啟用它的原因。如果確實需要為動畫啟用此屬性，請考慮將其與renderToHardwareTextureAndroid組合（如果視圖內容是靜態的（即，不需要每幀重繪）。如果啟用該屬性，則此視圖將在屏幕外渲染一次，保存在硬件紋理中，然後在每個幀上使用alpha合成到屏幕上，而無需在GPU上切換渲染目標。

TYPE	REQUIRED	PLATFORM
bool	No	Android

`renderToHardwareTextureAndroid`

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

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

TYPE	REQUIRED	PLATFORM
bool	No	Android

`accessibilityTraits`

為屏幕閱讀器提供額外的特徵。默認情況下，除非在元素中另有指定，否則不提供特徵。

您可以提供一個特徵或多個特徵的數組。

AccessibilityTraits的可能值包括：

'none' - 元素沒有特徵。
'button' - 該元素應被視為按鈕。
'link' - 該元素應被視為鏈接。
'header' - 元素是一個將內容劃分為多個部分的標題。
'search' - 該元素應被視為搜索字段。
'image' - 元素應被視為圖像。
'selected' - 選擇元素。
'plays' - 元素播放聲音。
'key' - 元素應該被視為鍵盤鍵。
'text' -該元素應被視為文本。
'summary' - 該元素提供應用摘要信息。
'disabled' - 禁用該元素。
'frequentUpdates' - 元素經常更改其值。
'startsMedia' - 元素啟動媒體會話。
'adjustable' - 該元素允許在一系列值上進行調整。
'allowsDirectInteraction' - 該元素允許VoiceOver用戶直接進行觸摸交互。
'pageTurn' - 通知VoiceOver，當它完成元素內容的讀取時，它應滾動到下一頁。

有關更多信息，請參閱 Accessibility guide 指南

TYPE	REQUIRED	PLATFORM
AccessibilityTraits, ,array of AccessibilityTraits	No	iOS

`accessibilityViewIsModal`

一個值，指示VoiceOver是否應忽略作為接收者兄弟的視圖中的元素。默認值為false。

有關更多信息，請參閱 Accessibility guide 指南

TYPE	REQUIRED	PLATFORM
bool	No	iOS

`accessibilityElementsHidden`

一個值，指示是否隱藏此輔助功能元素中包含的輔助功能元素。默認值為false。

有關更多信息，請參閱 Accessibility guide 指南

TYPE	REQUIRED	PLATFORM
bool	No	iOS

`shouldRasterizeIOS`

是否應在合成之前將此視圖呈現為位圖。

在iOS上，這對於不修改此組件的維度及其子項的動畫和交互非常有用;例如，在平移靜態視圖的位置時，光柵化允許渲染器重用靜態視圖的緩存位圖，並在每個幀期間快速合成它。

光柵化會產生離屏繪圖傳遞，位圖會消耗內存。使用此屬性時進行測試和測量。

TYPE	REQUIRED	PLATFORM
bool	No	iOS

Tags : 文件, 前端技術, 組件, 網頁設計, cli, components, CSS, Facebook, layout, props, React, React Native, Reactjs, ReactNative, style, UI

A-Fu Design

【React Native】文件翻譯閱讀紀錄 - Components(組件) - View

合成觸摸事件

Props

參考

Props

onStartShouldSetResponder

accessibilityLabel

hitSlop

nativeID

onAccessibilityTap

onLayout

onMagicTap

onMoveShouldSetResponder

onMoveShouldSetResponderCapture

onResponderGrant

onResponderMove

onResponderReject

onResponderRelease

onResponderTerminate

onResponderTerminationRequest

accessible

onStartShouldSetResponderCapture

pointerEvents

removeClippedSubviews

style

testID

accessibilityComponentType

accessibilityLiveRegion

collapsable

importantForAccessibility

needsOffscreenAlphaCompositing

renderToHardwareTextureAndroid

accessibilityTraits

accessibilityViewIsModal

accessibilityElementsHidden

shouldRasterizeIOS

You May Also Like

0 意見

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive

`onStartShouldSetResponder`

`accessibilityLabel`

`hitSlop`

`nativeID`

`onAccessibilityTap`

`onLayout`

`onMagicTap`

`onMoveShouldSetResponder`

`onMoveShouldSetResponderCapture`

`onResponderGrant`

`onResponderMove`

`onResponderReject`

`onResponderRelease`

`onResponderTerminate`

`onResponderTerminationRequest`

`accessible`

`onStartShouldSetResponderCapture`

`pointerEvents`

`removeClippedSubviews`

`style`

`testID`

`accessibilityComponentType`

`accessibilityLiveRegion`

`collapsable`

`importantForAccessibility`

`needsOffscreenAlphaCompositing`

`renderToHardwareTextureAndroid`

`accessibilityTraits`

`accessibilityViewIsModal`

`accessibilityElementsHidden`

`shouldRasterizeIOS`