Facebook Open Source React Native

AppRegistry

需要本機代碼的項目

此API僅適用於使用react-native init或使用Create React Native App製作的項目，這些項目已經彈出。有關彈出的詳細信息，請參閱Create React Native App存儲庫中的指南。

AppRegistry是運行所有React Native應用程序的JS入口點。應用程序根組件應該使用AppRegistry.registerComponent註冊自己，然後本機系統可以為應用程序加載包，然後通過調用AppRegistry.runApplication實際運行應用程序。

要在銷毀視圖時“停止”應用程序，請使用傳遞給runApplication的標記調用AppRegistry.unmountApplicationComponentAtRootTag。這些應始終作為一對使用。

應在需求序列的早期需要AppRegistry，以確保在需要其他模塊之前設置JS執行環境。

Methods

setWrapperComponentProvider

setComponentProviderInstrumentationHook

runApplication

unmountApplicationComponentAtRootTag

registerHeadlessTask

startHeadlessTask

參考

Methods

`setWrapperComponentProvider()`

static setWrapperComponentProvider(provider)

`registerConfig()`

static registerConfig(config)

`registerComponent()`

static registerComponent(appKey, componentProvider, section?)

`registerRunnable()`

static registerRunnable(appKey, run)

`registerSection()`

static registerSection(appKey, component)

`getAppKeys()`

static getAppKeys()

`getSectionKeys()`

static getSectionKeys()

`getSections()`

static getSections()

`getRunnable()`

static getRunnable(appKey)

`getRegistry()`

static getRegistry()

`setComponentProviderInstrumentationHook()`

static setComponentProviderInstrumentationHook(hook)

`runApplication()`

static runApplication(appKey, appParameters)

`unmountApplicationComponentAtRootTag()`

static unmountApplicationComponentAtRootTag(rootTag)

`registerHeadlessTask()`

static registerHeadlessTask(taskKey, task)

註冊無頭任務。無頭任務是在沒有UI的情況下運行的一些代碼。 @param taskKey與此任務相關聯的鍵@param task一個promise返回函數，它將從本機端傳遞的一些數據作為唯一參數;當promise被解決或被拒絕時，本機會通知此事件，並且它可能決定銷毀JS上下文。

`startHeadlessTask()`

static startHeadlessTask(taskId, taskKey, data)

僅從本機代碼調用。開始無頭任務。

@param taskId此任務實例的本機id跟踪其執行情況@param taskKey任務啟動@param數據的關鍵數據傳遞給任務

No 意見

Facebook Open Source React Native

Animated

動畫庫旨在使動畫流暢，強大，易於構建和維護。動畫關注於輸入和輸出之間的聲明關係，其間具有可配置的轉換，以及用於控制基於時間的動畫執行的簡單啟動/停止方法。

創建動畫的最簡單工作流程是創建Animated.Value，將其連接到動畫組件的一個或多個樣式屬性，然後使用Animated.timing（）通過動畫驅動更新：

Animated.timing(
  // Animate value over time
  this.state.fadeAnim, // The value to drive
  {
    toValue: 1, // Animate to final value of 1
  }
).start(); // Start the animation

請參閱 Animations 指南以查看動畫實際操作的其他示例。

概觀

您可以將兩種值類型與Animated一起使用：

Animated.Value() 表示單個值
Animated.ValueXY() 用於向量

Animated.Value可以綁定到樣式屬性或其他道具，也可以插入。單個Animated.Value可以驅動任意數量的屬性。

配置動畫

動畫提供三種類型的動畫類型。每種動畫類型都提供一個特定的動畫曲線，用於控制值從初始值到最終值的動畫效果：

Animated.decay()以初始速度開始，逐漸減慢到停止。
Animated.spring()提供了一個簡單的彈簧物理模型。
Animated.timing() 使用緩動函數動畫一段時間的值。

在大多數情況下，您將使用timing（）。默認情況下，它使用對稱的easeInOut曲線，將對象的逐漸加速度傳遞到全速，並通過逐漸減速到停止來結束。

使用動畫

通過在動畫上調用start（）來啟動動畫。 start（）接受一個完成回調，該回調將在動畫完成時調用。如果動畫正常運行，將使用{finished：true}調用完成回調。如果完成動畫是因為在它完成之前調用了stop（）（例如因為它被手勢或其他動畫中斷），那麼它將接收{finished：false}。

使用本機驅動程序

通過使用本機驅動程序，我們在開始動畫之前將有關動畫的所有內容髮送到本機，允許本機代碼在UI線程上執行動畫，而無需在每個幀上通過橋接。動畫啟動後，可以阻止JS線程而不影響動畫。

您可以通過在動畫配置中指定useNativeDriver：true來使用本機驅動程序。有關詳細信息，請參閱動畫指南。

動畫組件

只有動畫組件才能動畫。這些特殊組件可以將動畫值綁定到屬性，並進行有針對性的本機更新，以避免每幀反應渲染和協調過程的成本。他們還在卸載時處理清理，因此默認情況下它們是安全的。

createAnimatedComponent() 可用於使組件具有動畫效果。

動畫使用上面的包裝器導出以下可動畫組件：

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

撰寫動畫

動畫也可以使用合成功能以復雜的方式組合：

Animated.delay() 在給定的延遲後啟動動畫。
Animated.parallel()同時啟動了許多動畫。
Animated.sequence() 按順序啟動動畫，等待每個動畫在開始下一個動畫之前完成。
Animated.stagger() 按順序和並行啟動動畫，但連續延遲。

通過將一個動畫的toValue設置為另一個Animated.Value，動畫也可以鏈接在一起。請參閱“動畫”指南中的“跟踪動態值”。

默認情況下，如果一個動畫停止或中斷，則組中的所有其他動畫也將停止。

結合動畫值

您可以通過加法，減法，乘法，除法或模來組合兩個動畫值，以創建新的動畫值：

插值

interpolate()函數允許輸入範圍映射到不同的輸出範圍。默認情況下，它會將曲線外推到超出給定的範圍，但您也可以將其限制為輸出值。它默認使用直線插值，但也支持緩動功能

interpolate()

閱讀動畫指南中有關插值的更多信息。

處理手勢和其他事件

手勢（如平移或滾動）和其他事件可以使用Animated.event（）直接映射到動畫值。這是通過結構化地圖語法完成的，以便可以從復雜事件對像中提取值。第一級是允許跨多個args映射的數組，該數組包含嵌套對象。

Animated.event()

例如，在使用水平滾動手勢時，您將執行以下操作以將 event.nativeEvent.contentOffset.x 映射到 scrollX（Animated.Value）：

 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{ nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

Methods

Properties

參考

Methods

當給定值是ValueXY而不是Value時，每個配置選項可以是{x：...，y：...}形式的向量而不是標量。

`decay()`

static decay(value, config)

當給定值是ValueXY而不是Value時，每個配置選項可以是{x：...，y：...}形式的向量而不是標量。

Config是一個可能具有以下選項的對象：

velocity: 初始速度。需要。
deceleration: 衰減率。默認0.997。
isInteraction: 此動畫是否在InteractionManager上創建“交互句柄”。默認為true。
useNativeDriver: 當為true時使用本機驅動程序。默認為false。

`timing()`

static timing(value, config)

沿著定時緩動曲線設置動畫值。 Easing模塊有大量預定義曲線，或者您可以使用自己的功能。

Config是一個可能具有以下選項的對象：

duration: 動畫長度（毫秒）。默認500。
easing: 緩動函數定義曲線。默認為Easing.inOut（Easing.ease）。
delay: 延遲後開始動畫（毫秒）。默認值為0。
isInteraction: 此動畫是否在InteractionManager上創建“交互句柄”。默認為true。
useNativeDriver: 當為true時使用本機驅動程序。默認為false。

`spring()`

static spring(value, config)

根據基於阻尼諧振動的分析彈簧模型設定值。跟踪速度狀態以在toValue更新時創建流體運動，並且可以鏈接在一起。

Config是一個可能具有以下選項的對象。

請注意，您只能定義一個彈跳/速度，張力/摩擦力或剛度/阻尼/質量，但不能超過一個：

摩擦/張力或彈跳/速度選項與 Facebook Pop，Rebound 和 Origami 中的彈簧模型相匹配。

friction: 控制“彈性”/過衝。默認7。
tension: 控制速度。默認40。
speed: 控制動畫的速度。默認12。
bounciness: 控制彈性。默認8。

將剛度/阻尼/質量指定為參數使得Animated.spring使用基於阻尼諧振子的運動方程的分析彈簧模型。這種行為稍微精確一點，忠實於彈簧動力學背後的物理學，並且非常模仿iOS的CASpringAnimation原語中的實現。

stiffness: 彈簧剛度係數。默認為100。
damping: 定義由於摩擦力如何阻尼彈簧的運動。默認10。
mass: 附著在彈簧末端的物體的質量。默認1。

其他配置選項如下：

velocity: 附著在彈簧上的物體的初始速度。默認值為0（對象處於靜止狀態）。
overshootClamping: 布爾值，指示彈簧是否應該被夾緊而不是彈跳。默認為false。
restDisplacementThreshold: 靜止位移的閾值，低於該閾值時應考慮彈簧處於靜止狀態。默認值為0.001。
restSpeedThreshold: 靜止時應考慮彈簧的速度，以每秒像素為單位。默認值為0.001。
delay:延遲後開始動畫（毫秒）。默認值為0。
isInteraction: 此動畫是否在InteractionManager上創建“交互句柄”。默認為true。
useNativeDriver: 當為true時使用本機驅動程序。默認為false。

`add()`

static add(a, b)

創建一個新的Animated值，該值由兩個一起添加的Animated值組成。

`subtract()`

static subtract(a, b)

通過從第一個動畫值中減去第二個動畫值，創建一個新的動畫值。

`divide()`

static divide(a, b)

創建一個新的動畫值，該值由第一個動畫值除以第二個動畫值組成。

`multiply()`

static multiply(a, b)

創建一個新的Animated值，該值由兩個相加的Animated值組成。

`modulo()`

static modulo(a, modulus)

創建一個新的Animated值，它是所提供的Animated值的（非負）模數

`diffClamp()`

static diffClamp(a, min, max)

創建一個限制在2個值之間的新動畫值。它使用最後一個值之間的差值，因此即使該值遠離邊界，它也會在值開始再次接近時開始變化。（value = clamp（value + diff，min，max））。

這對於滾動事件很有用，例如，在向上滾動時顯示導航欄並在向下滾動時隱藏它。

`delay()`

static delay(time)

在給定的延遲後開始動畫。

`sequence()`

static sequence(animations)

按順序啟動動畫數組，等待每個動畫在開始下一個動畫之前完成。如果當前正在運行的動畫停止，則不會啟動以下動畫。

`parallel()`

static parallel(animations, config?)

同時啟動一系列動畫。默認情況下，如果其中一個動畫停止，它們將全部停止。您可以使用stopTogether標誌覆蓋它。

`stagger()`

static stagger(time, animations)

動畫陣列可以並行（重疊）運行，但是以連續延遲的順序啟動。很適合做尾隨效果。

`loop()`

static loop(animation)

連續循環給定動畫，以便每次到達結尾時，它會重置並從頭開始。可以使用配置中的密鑰迭代指定循環的次數。如果子動畫設置為useNativeDriver：true，將循環而不阻止UI線程。此外，循環可以防止基於VirtualizedList的組件在動畫運行時呈現更多行。您可以在子動畫配置中傳遞isInteraction：false來修復此問題。

`event()`

static event(argMapping, config?)

獲取映射數組並相應地從每個arg中提取值，然後在映射的輸出上調用setValue。例如

 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
   {listener: (event) => console.log(event)}, // Optional async listener
 )}
 ...
 onPanResponderMove: Animated.event([
   null,                // raw event arg ignored
   {dx: this._panX}],    // gestureState arg
{listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
 ),

Config是一個可能具有以下選項的對象：

listener: 可選的異步偵聽器。
useNativeDriver: 當為true時使用本機驅動程序。默認為false。

`forkEvent()`

static forkEvent(event, listener)

用於窺探通過 props 傳遞的動畫事件的高級命令式API。它允許向現有的 AnimatedEvent 添加新的javascript偵聽器。如果 animatedEvent 是一個簡單的javascript 偵聽器，它會將2個偵聽器合併為一個偵聽器，如果 animatedEvent 為 null / undefined，它將直接分配javascript偵聽器。盡可能直接使用值。

`unforkEvent()`

static unforkEvent(event, listener)

屬性

No 意見

A-Fu Design

需要本機代碼的項目

Methods

參考

Methods

setWrapperComponentProvider()

registerConfig()

registerComponent()

registerRunnable()

registerSection()

getAppKeys()

getSectionKeys()

getSections()

getRunnable()

getRegistry()

setComponentProviderInstrumentationHook()

runApplication()

unmountApplicationComponentAtRootTag()

registerHeadlessTask()

startHeadlessTask()

概觀

配置動畫

使用動畫

使用本機驅動程序

動畫組件

撰寫動畫

結合動畫值

插值

處理手勢和其他事件

Methods

Properties

參考

Methods

decay()

timing()

spring()

add()

subtract()

divide()

multiply()

modulo()

diffClamp()

delay()

sequence()

parallel()

stagger()

loop()

event()

forkEvent()

unforkEvent()

屬性

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive

`setWrapperComponentProvider()`

`registerConfig()`

`registerComponent()`

`registerRunnable()`

`registerSection()`

`getAppKeys()`

`getSectionKeys()`

`getSections()`

`getRunnable()`

`getRegistry()`

`setComponentProviderInstrumentationHook()`

`runApplication()`

`unmountApplicationComponentAtRootTag()`

`registerHeadlessTask()`

`startHeadlessTask()`

`decay()`

`timing()`

`spring()`

`add()`

`subtract()`

`divide()`

`multiply()`

`modulo()`

`diffClamp()`

`delay()`

`sequence()`

`parallel()`

`stagger()`

`loop()`

`event()`

`forkEvent()`

`unforkEvent()`