我正在尝试做的事情
我正在尝试创建一个动画间距/填充元素，该元素在显示或隐藏键盘时会改变高度，以确保 TextInput 不被键盘或避免键盘使用的按钮覆盖KeyboardAvoidingView。如果按钮将覆盖输入，我只希望这个动画空间改变高度 - 否则，我不希望间距改变高度。这是设计要求。
我目前的解决方案
我以前可以使用Animated来自 的 API来实现这一点react-native，但是我想用它react-native-reanimated来获得在 UI 线程上运行所有内容的性能优势。我实际上有一个可行的解决方案，但是在动画期间 UI 线程下降到 50 fps 中，所以我假设我做错了什么。
正如您将在下面的代码中看到的那样，我正在计算所有元素的高度，以确定固定在键盘顶部的按钮是否与TextInput. 如果是这样，我从文本上方的间距高度中减去重叠量（animHeaderHeight）。您应该能够复制粘贴此代码并运行它。如果您打开分析器并观看 UI 线程，通过聚焦输入并点击返回来关闭它来切换动画。动画有效，但它会导致 UI 线程以低于 60fps 的速度运行。
可重现的代码
我用expo init. 以下是软件包版本：
"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动画取决于键盘的状态（即取决于来自 JS 线程的信息）这一事实有关。我有点想知道如果没有 JS 和 UI 线程之间通过桥接的持续通信，这是否可能实现。任何帮助或方向将不胜感激。