如何對 React Native Reanimated 中的鍵盤事件做出反應？

Question

我正在嘗試做的事情

我正在嘗試創建一個動畫間距/填充元素，該元素在顯示或隱藏鍵盤時會改變高度，以確保 TextInput 不被鍵盤或使用KeyboardAvoidingView避免鍵盤的按鈕覆蓋。 如果按鈕將覆蓋輸入，我只希望這個動畫空間改變高度 - 否則，我不希望間距改變高度。 這是設計要求。

我目前的解決方案

我以前可以使用 react-native 的Animated react-native來實現這一點，但是我想使用react-native-reanimated來獲得在 UI 線程上運行所有內容的性能優勢。 我實際上有一個可行的解決方案，但是在 animation 期間 UI 線程下降到 50 fps，所以我假設我做錯了什么。

正如您將在下面的代碼中看到的那樣，我正在計算所有元素的高度，以確定錨定到鍵盤頂部的按鈕是否與TextInput重疊。 如果是這樣，我從文本上方的間距高度（ animHeaderHeight ）中減去重疊量。 您應該能夠復制粘貼此代碼並運行它。 如果您打開分析器並觀察 UI 線程，通過聚焦輸入並點擊返回來關閉它來切換 animation。 animation 可以工作，但它會導致 UI 線程以低於 60fps 的速度運行。

可重現的代碼

我使用expo init引導項目。 以下是 package 版本：

"expo": "^35.0.0",
"expo-constants": "~7.0.0",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.2.0",

這是代碼。

import React, { useEffect, useRef } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Keyboard,
  KeyboardEvent,
  KeyboardEventName,
  Platform,
  TextInput,
  SafeAreaView,
  KeyboardAvoidingView,
  LayoutChangeEvent,
  Dimensions
} from "react-native";
import Animated, { Easing } from "react-native-reanimated";
import Constants from "expo-constants";

const DEVICE_HEIGHT = Dimensions.get("screen").height;
const STATUS_BAR_HEIGHT = Constants.statusBarHeight;
const HEADER_HEIGHT = 100;
const MAX_ANIMATED_HEIGHT = 75;
const BOTTOM_BUTTON_HEIGHT = 60;
const KEYBOARD_EASING = Easing.bezier(0.38, 0.7, 0.125, 1.0);

const {
  Value,
  Clock,
  set,
  block,
  cond,
  eq,
  and,
  neq,
  add,
  sub,
  max,
  startClock,
  stopClock,
  timing,
  interpolate
} = Animated;

export default App = () => {
  // These refs are used so the height calculations are only called once and don't cause re-renders
  const wasKeyboardMeasured = useRef(false);
  const wasContentMeasured = useRef(false);

  const clock = new Clock();
  const keyboardShown = new Value(-1);
  const animKeyboardHeight = new Value(0);
  const animContentHeight = new Value(0);

  function handleLayout(e) {
    if (!wasContentMeasured.current) {
      // Set animated value and set ref measured flag true
      const height = Math.floor(e.nativeEvent.layout.height);
      wasContentMeasured.current = true;
      animContentHeight.setValue(height);
    }
  }

  useEffect(() => {
    const handleKbdShow = (e: KeyboardEvent) => {
      if (!wasKeyboardMeasured.current) {
        // Set animated value and set ref measured flag true
        const kbdHeight = Math.floor(e.endCoordinates.height);
        wasKeyboardMeasured.current = true;
        animKeyboardHeight.setValue(kbdHeight);
      }
      keyboardShown.setValue(1);
    };
    const handleKbdHide = () => {
      keyboardShown.setValue(0
);
    };

    const kbdWillOrDid = Platform.select({ ios: "Will", android: "Did" });
    const showEventName = `keyboard${kbdWillOrDid}Show`;
    const hideEventName = `keyboard${kbdWillOrDid}Hide`;

    Keyboard.addListener(showEventName, handleKbdShow);
    Keyboard.addListener(hideEventName, handleKbdHide);

    return () => {
      Keyboard.removeListener(showEventName, handleKbdShow);
      Keyboard.removeListener(hideEventName, handleKbdHide);
    };
  }, []);

  const animHeaderHeight = runTiming(
    clock,
    keyboardShown,
    animContentHeight,
    animKeyboardHeight
  );

  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container} behavior="padding">
        <View style={styles.header}>
          <Text style={styles.headerText}>Header</Text>
        </View>
        <Animated.View
          style={[styles.animatedSpace, { height: animHeaderHeight }]}
        />
        <View onLayout={handleLayout}>
          <View style={styles.heading}>
            <Text style={styles.headingText}>
              Note: CHANGE THIS TEXT CONTENT TO WHATEVER LENGTH MAKES THE BOTTOM
              BUTTON OVERLAP THE TEXT INPUT WHEN THE KEYBOARD IS SHOWN! Lorem
              ipsum dolor sit amet, consectetur adipiscing elit.
            </Text>
          </View>
          <View style={styles.textInputContainer}>
            <TextInput style={styles.textInput} autoFocus={true} />
          </View>
        </View>
        <TouchableOpacity style={styles.bottomButton} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

function runTiming(
  clock,
  keyboardShown,
  animContentHeight,
  animKeyboardHeight
) {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0)
  };

  const config = {
    duration: 300,
    toValue: new Value(-1),
    easing: KEYBOARD_EASING
  };

  const upperContentHeightNode = add(
    STATUS_BAR_HEIGHT,
    HEADER_HEIGHT,
    MAX_ANIMATED_HEIGHT,
    animContentHeight
  );
  const keyboardContentHeightNode = add(
    BOTTOM_BUTTON_HEIGHT,
    animKeyboardHeight
  );
  const overlap = max(
    sub(add(upperContentHeightNode, keyboardContentHeightNode), DEVICE_HEIGHT),
    0
  );
  const headerMinHeightNode = max(sub(MAX_ANIMATED_HEIGHT, overlap), 0);

  return block([
    cond(and(eq(keyboardShown, 1), neq(config.toValue, 1)), [
      set(state.finished, 0),
      set(state.time, 0),
      set(state.frameTime, 0),
      set(config.toValue, 1),
      startClock(clock)
    ]),
    cond(and(eq(keyboardShown, 0), neq(config.toValue, 0)), [
      set(state.finished, 0),
      set(state.time, 0),
      set(state.frameTime, 0),
      set(config.toValue, 0),
      startClock(clock)
    ]),
    timing(clock, state, config),
    cond(state.finished, stopClock(clock)),
    interpolate(state.position, {
      inputRange: [0, 1],
      outputRange: [MAX_ANIMATED_HEIGHT, headerMinHeightNode]
    })
  ]);
}

// Coloring below is used just to easily see the different components
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    height: HEADER_HEIGHT,
    width: "100%",
    backgroundColor: "teal",
    justifyContent: "center",
    alignItems: "center"
  },
  headerText: {
    color: "white"
  },
  heading: {
    alignItems: "center",
    marginBottom: 15,
    paddingHorizontal: 30
  },
  headingText: {
    fontSize: 28,
    fontWeight: "600",
    textAlign: "center"
  },
  animatedSpace: {
    backgroundColor: "pink",
    width: "100%"
  },
  textInputContainer: {
    alignItems: "center",
    paddingHorizontal: 40,
    width: "100%",
    height: 60
  },
  textInput: {
    backgroundColor: "lightgray",
    width: "100%",
    height: 60
  },
  bottomButton: {
    marginTop: "auto",
    height: BOTTOM_BUTTON_HEIGHT,
    backgroundColor: "orange",
    paddingHorizontal: 20
  }
});

最后的想法

我希望 UI fps 保持一致的 60，但是我設置東西的方式導致丟幀。 我想知道這是否與我的react-native-reanimated reanimated animation 依賴於鍵盤的 state （即依賴於來自 JS 線程的信息）這一事實有關。 我有點想知道如果沒有 JS 和 UI 線程之間通過橋接的持續通信，這是否可能實現。 任何幫助或方向將不勝感激。

Answer 1

為了安全起見，您能否將 runTiming 調用包裝到具有適當依賴關系的用例中？ [鍵盤顯示等]。 您的代碼片段中有很多可能引發問題的副作用。